@charset 'utf-8';

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

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

/* キービジュアル（BOX） */
/* #kv-top_box {display:none;} */
#kv-top_box {
	position:relative;
	width:100%;
	height:100%;
	margin:0 auto;
	display:block;
}

/* logo */

#kv-top_box p a {
	position:absolute;
	bottom:10px;
	left:-48px;
	width:60%;
	height:auto;
	padding-top:20%;
	background:url(../img/common/logo_mini.png) no-repeat center center;
	background-size:70%;
}
#kv-top_box p a:hover {opacity:0.7;}

/* バナーエリア（wrapper） */
#bnr-top {
	/*overflow:hidden;*/
	width:100%;
	background:url(../img/top/bg_pt-black-sp.png) repeat;
	background-size:3px 3px;
	background-position:left top;
}

/* バナーリスト（BOX） */
#bnr-top ul {overflow:hidden; width:100%; text-align:center; padding:3% 0 2% 0; margin:0 auto;}

/* バナーリスト */
#bnr-top li {width:48%; float:left; padding:0 0 1% 0; margin:0 1%;}
#bnr-top li img {width:100%; height:auto; -webkit-backface-visibility:hidden; backface-visibility:hidden;}

/* リリース（BOX） */
#release-pc {display:none;}
#release-sp_wrapper {
	width:100%;
	font-size:0;
	background:url(../img/top/bg_release-sp.png);
	background-repeat:repeat-x;
	background-size:3px 18px;
	background-position:left top;
	padding:15.5% 0 0;
}

#release-sp {
	width:96%;
	font-size:0;
	background:rgba(255,255,255,0.7);
	border:2px solid #454545;
	border-bottom:4px solid #454545;
	border-radius:6px;
	margin:0 auto;
}

/* 好評配信中!! */
#release-sp h2 img {width:62%; height:auto; margin:-6.2% auto 16px}

/* store（ボタン） */
#release-sp ul {overflow:hidden; padding:0 0 25px;}
#release-sp li a img {float:left; width:47%; height:auto; -webkit-backface-visibility:hidden; backface-visibility:hidden; cursor:pointer; margin:0 1.5%}
#release-sp li.release-sp-register a img {float:left; width:80%; height:auto; -webkit-backface-visibility:hidden; backface-visibility:hidden; cursor:pointer; margin:0 10%}

/* 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:175px; 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:205px; 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:71%;
	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-size:30%, 58%;
	font-size:0;
}

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

/* screenshot-top */
#screenshot-top {
	clear:both;
	position:relative;
	width:96%;
	padding-top:71%;
	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);
}

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

/* PVタイトル（PV第一弾公開中） */
#screenshot-top p {
	display:inline-block;
	position:absolute;
	top:10%;
	left:0;
	right:0;
	margin:auto;
	width:100%;
	max-width:500px;
	height:40px;
	background-size:30%, 58%;
	font-size:0;
}

/* SS(SLIDER) */
#screenshot-top #screenshot-box {position:absolute; bottom:15%; left:0; right:0; margin:auto; width:90%; height:70%;}


/* screenshot-top */
#character-top {
	clear:both;
	position:relative;
	width:96%;
	padding-top:71%;
	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);
}

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

/* PVタイトル（PV第一弾公開中） */
#character-top p {
	display:inline-block;
	position:absolute;
	top:10%;
	left:0;
	right:0;
	margin:auto;
	width:100%;
	max-width:500px;
	height:40px;
	background-size:30%, 58%;
	font-size:0;
}

/* SS(SLIDER) */
#character-top #character-box {position:absolute; bottom:15%; left:0; right:0; margin:auto; width:90%; height:70%;}

/* spec-top（BOX） */
#spec-top-pc {display:none;}
#spec-top {
	clear:both;
	position:relative;
	width:96%;
	background:url(../img/top/bg_spec.png) no-repeat center bottom;
	/* background-size:1030px 644px;*/
	border:2px solid #454545;
	border-bottom:4px solid #454545;
	border-radius:6px;
	padding:0 0 30px;
	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%;}

/* アプリアイコン */
#icon_app img {border-radius:12px; width:38%; height:auto; margin:45px auto 22px;}

/* スペックリスト */
#spec-top dl {font-size:12px; letter-spacing:-1px; line-height:2;margin:0 0 0 5%; padding:0 0 19px 0;}
#spec-top dl dt {float:left;}
#spec-top h3 {font-size:12px; letter-spacing:-1px; line-height:2; margin:0 3%; font-weight:normal;}
#spec-top p {font-size:12px; letter-spacing:-1px; line-height:2; margin:0 5%;}
#spec-top p span,
#spec-top dl span {width:90px; display:inline-block;}
#spec-top dd {padding: 0 0 0 5px;}

/* 対応機種の詳細はこちら（ボタン） */
#popup-bt-spec a {display:block; width:94%; font-size:0; padding-top:15%; background:url(../img/top/bt_spec.png) no-repeat center center; background-size:100% auto; margin:2px auto 8px;}
#popup-bt-spec a:hover {opacity:0.7;}
.is_ios #popup-bt-spec a:hover {opacity:1;}

/* コンテンツBOX（ポップアップ） */
.popup-spec_box {
	width:100%;
	overflow:hidden;
	padding:30px 4% 20px;
	background:rgba(0,0,0,0.5);
}

/* 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;}

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

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

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

/* メンテナンス */
.maintenance {background:url(../img/common/icon_maintenance.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}


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

/* logo */
/* #kv_box {display:none;} */
#kv_box {
	position:relative;
	width:100%;
	height:100%;
	margin:0 auto;
	/*border:1px solid #000000;*/
}

/* logo */

#kv_box p a {
	position:absolute;
	bottom:10px;
	left:-48px;
	width:60%;
	height:auto;
	padding-top:20%;
	background:url(../img/common/logo_mini.png) no-repeat center center;
	background-size:70%;
}
#kv_box p a:hover {opacity:0.7;}

/* 事前登録30万人突破記念〜 */
#campaign {
	width:100%;
	padding-top:15.625%;
	background:url(../img/register/campaign.png) no-repeat center, url(../img/register/bg_campaign.png);;
	background-size:100%,25%;
	font-size:0;
}

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

/* 全員にビーストストーンと「黄金の甲斐先生像」をプレゼント!! */
#bonus_txt {width:93%; padding-top:41%; background:url(../img/register/bonus_txt.jpg) no-repeat center; background-size:100%; margin:9px auto 11px; font-size:0;}

/* プレゼント注意テキスト（上記特典はゲーム内の〜） */
#bonus_note {width:93%; margin:0 auto 21px; padding:9px 9px; background:rgba(255,255,255,0.7); border:1px solid #ccc; font-size:11px;}

/* 報酬一覧 */
#bonus ul {width:100%; margin:10px auto auto auto; font-size:0;}
#bonus li {position:relative; margin:0 auto;}
#bonus li:nth-child(1) {width:93%; padding-top:25%; background:url(../img/register/bonus_01.png) no-repeat center; background-size:100%;}
#bonus li:nth-child(3) {width:93%; padding-top:25%; background:url(../img/register/bonus_02.png) no-repeat center; background-size:100%;}
#bonus li:nth-child(5) {width:93%; padding-top:25%; background:url(../img/register/bonus_03.png) no-repeat center; background-size:100%;}
#bonus li:nth-child(7) {width:93%; padding-top:25%; background:url(../img/register/bonus_04.png) no-repeat center; background-size:100%;}
#bonus li:nth-child(9) {width:93%; padding-top:25%; background:url(../img/register/bonus_05.png) no-repeat center; background-size:100%;}
#bonus li:nth-child(11) {width:93%; padding-top:25%; background:url(../img/register/bonus_06.png) no-repeat center; background-size:100%;}
#bonus li:nth-child(13) {width:93%; padding-top:25%; background:url(../img/register/bonus_07.png) no-repeat center; background-size:100%;}
#bonus li:nth-child(15) {width:93%; padding-top:25%; background:url(../img/register/bonus_08.png) no-repeat center; background-size:100%;}
#bonus li:nth-child(17) {width:93%; padding-top:25%; background:url(../img/register/bonus_09.png) no-repeat center; background-size:100%;}
#bonus li:nth-child(even) {width:10%; padding-top:10%; 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:-14.5%; right:0%; display:block; width:15%; padding-top:22.5%; opacity: 0.8; background:url(../img/register/bt_stamp.png) no-repeat center center; background-size:100%;}


/* 0.1 - 登録登録（../pre-register/complete）
---------------------------------------------------------------------------------------------------------- */

#register-ing-wrapper {
	width:100%;
	font-size:0;
	padding:15.5% 0 0;
}

#register-ing {
	width:96%;
	font-size:0;
	background:rgba(255,255,255,0.7);
	border:2px solid #454545;
	border-bottom:4px solid #454545;
	border-radius:6px;
	margin:0 auto;
}

/* 今すぐ事前登録!! */
#register-ing h2 img {width:62%; height:auto; margin:-6.2% auto 16px}

/* ボタン */
#register-ing ul {overflow:hidden; padding:0 0 25px;}
#register-ing li a img {float:left; width:31%; height:auto; -webkit-backface-visibility:hidden; backface-visibility:hidden; cursor:pointer; margin:0 1%}

/* 登録完了（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;
}


}