@charset 'utf-8';

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

/**
 * 【SP】新テニスの王子様 ライジングビート【公式サイト】
 *
 * 【common】
 * 1.0 - common
 * 　　|- html, body
 * 　　|- dev_ios
 * 　　|- a
 *
 * 2.0 - header
 *  　　|- header（wrapper）
 *   　　|- gnav
 *    　　|- logo
 *    　　|- munu
 *    　　|- sns
 *  　　|- gnav-list
 *   　　|- NEWアイコン
 *
 * 3.0 - content
 *  　　|- wrapper
 *  　　|- content
 *  　　|- lhd（下層ヘッダー）
 *
 * 4.0 - footer
 *  　　|- footer（wrapper）
 *  　　|- ft_bnr
 *   　　|- list（バナー）
 *  　　|- ft_nav
 *   　　|- copyright
 *   　　|- list（プライバシーポリシー, お問い合わせ）
 *  　　|- PageTop
 *
 * --------------------------------------------------------------------------------------------------------------------------------------- */

/* 1.0 - common
---------------------------------------------------------------------------------------------------------- */
html, body {
	font-family:"メイリオ", verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Meiryo", Sans-Serif;
	min-width:100px;
	max-width: 2560px;
	max-height:99999px;
	color:#333;
	font-size:14px;
	line-height:1.7;
	moz-text-size-adjust:none;
	-ms-text-size-adjust:100%;
	-webkit-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;}

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

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


/* 2.0 - header
---------------------------------------------------------------------------------------------------------- */
/* header（wrapper） */
header {
	overflow:hidden;
	width:100%;
	height:70px;
	background:url(../img/common/gnav/bg_gnav-left.png), url(../img/common/gnav/bg_gnav-right.png);
	background-repeat:no-repeat, no-repeat;
	background-position:left top, right top;
	background-size:46%, 46%;
	background-color:#fff;
	border-bottom:2px solid #707070;
}

/* gnav */
#gnav-pc {display:none;}
#gnav {height:66px; border-bottom:3px solid #d9035e;}

/* gnav-list_box */
#gnav-list_box {position:relative; overflow:hidden; width:100%; text-indent:100%; white-space:nowrap; overflow:hidden; display:none;}

/* gnav-list */
#gnav-list {
	overflow:hidden;
	width:100%;
	background:url(../img/common/gnav/bg_gnav-left.png), url(../img/common/gnav/bg_gnav-right.png);
	background-repeat:repeat-y, repeat-y;
	background-position:left top, right top;
	background-size:46%, 46%;
	border-bottom:3px solid #d9035e;
	padding:0 0 2px 0;
}

#gnav-list li a {position:relative; border-bottom:2px solid #707070;}
#gnav-list li:nth-child(even) a {border-left:2px solid #707070;}
#gnav-list li a {float:left; width:50%; padding-top:15%; background-color:#fff;}
#gnav-list li a:hover {opacity:0.6;}
.is_ios #gnav-list li a:hover {opacity:1;}

#gnav-list li:nth-child(1) a {background:url(../img/common/gnav/top-sp.png) no-repeat center center; background-size:62%;}
#gnav-list li:nth-child(2) a {background:url(../img/common/gnav/news-sp.png) no-repeat center center; background-size:62%;}
#gnav-list li:nth-child(3) a {background:url(../img/common/gnav/comingsoon-gnav.png) no-repeat center top, url(../img/common/gnav/system-sp.png) no-repeat center center; background-size:82%, 62%;}
#gnav-list li:nth-child(4) a {background:url(../img/common/gnav/character-sp.png) no-repeat center center; background-size:62%;}
#gnav-list li:nth-child(5) a {background:url(../img/common/gnav/music-sp.png) no-repeat center center; background-size:62%;}
#gnav-list li:nth-child(6) a {background:url(../img/common/gnav/movie-sp.png) no-repeat center center; background-size:62%;}

/* NEWアイコン */
#gnav-list li img {width:100%; height:auto; position:absolute; top:0; left:0;}

/* comingsoon */
#comingsoon-system-sp {width:50%; padding-top:15%; position:absolute; top:32.7%; left:0; overflow:hidden; text-indent:100%; white-space:nowrap;}

/* logo */
#logo {float:left; width:132px; margin:6px 0 0 4px;}
#logo img {width:100%; height:auto;}

/* gnav_menu */
#gnav_menu {
	float:right;
	display:block;
	width:52px;
	height:59px;
	background:url(../img/common/gnav/bt_menu.png);
	background-size:100%;
	margin:3px 0 0 5px;
	overflow:hidden;
	text-indent:100%;
	white-space:nowrap;
}

#gnav_menu:hover {opacity:0.7;}
.is_ios #gnav_menu:hover {opacity:1;}

#gnav_menu.active{background:url(../img/common/gnav/bt_menu-close.png); background-size:100%;}

/* sns */
#gnav ul {float:right; margin:17px 0 0 0;}
#gnav li {float:left; width:35px; height:auto; margin:0 4px 0 0;}
#gnav li img {width:35px; height:auto;}


/* 3.0 - content
---------------------------------------------------------------------------------------------------------- */
/* wrapper */
#wrapper {overflow:hidden; width:100%; padding-bottom:110px; background:url(../img/common/bg_content-sp.jpg) repeat-y; background-size:100%;}

/* content */
.content {width:100%;}

/* lhd（下層ヘッダー） */
#lhd {width:100%; height:58px; background:url(../img/common/bg_lhd.png) repeat-x center; margin:0 0 28px; background-size:116px 58px;}

#lhd h1 {position:relative; width:100%; height:58px; margin:28px auto 0 auto; text-indent:100%; white-space:nowrap;}

/* 4.0 - footer
---------------------------------------------------------------------------------------------------------- */
/* footer（wrapper） */
footer {overflow:hidden;}

/* ft_bnr */
#ft_bnr {
	width:100%;
	background:url(../img/common/footer/bg_content.png) repeat;
	border-bottom:2px solid #000;
}

/* list（バナー） */
#ft_bnr ul {width:100%; overflow:hidden; text-indent:100%; white-space:nowrap; padding:3% 2%;}
#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:18%; padding-top:7%; background:url(../img/common/footer/bnr/bushiroad.png) no-repeat center; background-size:100%; margin:0 3% 0 0;}
#ft_bnr li:nth-child(2) a {float:left; width:28%; padding-top:7%; background:url(../img/common/footer/bnr/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/footer/bnr/official_banner.png) no-repeat center; background-size:contain;}

/* ft_nav-wrapper */
#ft_nav-wrapper {width:100%; background:url(../img/common/footer/bg_ft.png) repeat; border-top:1px solid #fff;}

/* ft_nav */
#ft_nav {width:100%; color:#fff; font-size:10px; padding:16px 0 0 0;}

/* copyright */
#ft_nav p {text-align:center;}
.ft_nav-sp {padding:0 0 14px 0;}

/* list（プライバシーポリシー, お問い合わせ） */
#ft_list_wrapper {overflow:hidden; background:url(../img/common/footer/bg_nav.jpg) repeat; padding:18px 0;}
#ft_nav ul {text-align:center; background:#0F0; display:block;}
#ft_nav li {float:left; width:50%; border-right:1px solid #fff;}
#ft_nav li:nth-child(2) {border-right:none;}
#ft_nav li a {color:#fff;}
#ft_nav li a:hover {opacity:0.7;}

/* PageTop */
#pagetop {position:fixed; z-index:999; transition:0.3s;}
#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;}


}



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

/**
 * 【PC】新テニスの王子様 ライジングビート【公式サイト】
 *
 * 【common】
 * 1.0 - common
 * 　　|- html, body
 * 　　|- dev_ios
 * 　　|- a
 *
 * 2.0 - header
 *  　　|- header（wrapper）
 *   　　|- gnav-PC
 *    　　|- gnav_list
 *     　　|- comingsoon
 *    　　|- gnav_sns
 *
 * 3.0 - content
 *  　　|- wrapper
 *  　　|- content
 *  　　|- lhd（下層ヘッダー）
 *
 * 4.0 - footer
 *  　　|- footer（wrapper）
 *  　　|- ft_bnr
 *   　　|- list（バナー）
 *  　　|- ft_nav
 *   　　|- copyright
 *   　　|- list（プライバシーポリシー, お問い合わせ）
 *  　　|- PageTop
 *
 * --------------------------------------------------------------------------------------------------------------------------------------- */

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

}

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

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

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


/* 2.0 - header
---------------------------------------------------------------------------------------------------------- */
/* header（wrapper） */
header {width:100%; max-width:2560px; margin:0 auto; height:90px; background:url(../img/common/gnav/bg_gnav.png) no-repeat center, url(../img/common/gnav/bg_gnav-lp.png) repeat-x;}

/* gnav */
#gnav, #gnav-list_box, #gnav-list,#comingsoon-system-sp, #comingsoon-character-sp {display:none;}
#gnav-pc {position:relative; width:1180px; height:90px; background:; margin:0 auto;}

/* gnav_list */
#gnav_list-pc {position:absolute; left:0; top:-1px; overflow:hidden; text-indent:100%; white-space:nowrap;}

#gnav_list-pc li {
	float:left;
	height:78px;
	margin:0 8px;
	transition-duration:0.5s;
}

#gnav_list-pc li a {position:relative; overflow:hidden; display:block; height:78px;}

#gnav_list-pc li:nth-child(1) {width:130px; background:url(../img/common/gnav/top.png) no-repeat center center;}
#gnav_list-pc li:nth-child(2) {width:130px; background:url(../img/common/gnav/news.png) no-repeat center center;}
#gnav_list-pc li:nth-child(3) {width:130px; background:url(../img/common/gnav/system.png) no-repeat center center;}
#gnav_list-pc li:nth-child(4) {width:190px; background:url(../img/common/gnav/character.png) no-repeat center center;margin:0 9px;}
#gnav_list-pc li:nth-child(5) {width:130px; background:url(../img/common/gnav/music.png) no-repeat center center;}
#gnav_list-pc li:nth-child(6) {width:130px; background:url(../img/common/gnav/movie.png) no-repeat center center;}

#gnav_list-pc li:nth-child(1):hover {width:130px; background:url(../img/common/gnav/top_over.png) no-repeat center center;}
#gnav_list-pc li:nth-child(2):hover, #gnav_list-pc li:nth-child(2).current {width:130px; background:url(../img/common/gnav/news_over.png) no-repeat center center;}
#gnav_list-pc li:nth-child(3):hover, #gnav_list-pc li:nth-child(3).current {width:130px; background:url(../img/common/gnav/system_over.png) no-repeat center center;}
#gnav_list-pc li:nth-child(4):hover, #gnav_list-pc li:nth-child(4).current {width:190px; background:url(../img/common/gnav/character_over.png) no-repeat center center;}
#gnav_list-pc li:nth-child(5):hover, #gnav_list-pc li:nth-child(5).current {width:130px; background:url(../img/common/gnav/music_over.png) no-repeat center center;}
#gnav_list-pc li:nth-child(6):hover, #gnav_list-pc li:nth-child(6).current {width:130px; background:url(../img/common/gnav/movie_over.png) no-repeat center center;}

/* NEWアイコン */
#gnav_list-pc li a img {position:absolute; top:2px; right:6px;}
#gnav_list-pc li a:hover img {opacity:1;}

/* comingsoon */
#comingsoon-system-pc {width:166px; height:90px; background:url(../img/common/gnav/comingsoon.png) no-repeat center center; position:absolute; top:0; left:283px; overflow:hidden; text-indent:100%; white-space:nowrap;}

/* gnav_sns */
#gnav_sns-pc {float:right; margin:0 15px 0 0;}
#gnav_sns-pc li {float:left; display:block; width:52px; height:54px; margin:16px 0 0 23px;}


/* 3.0 - content
---------------------------------------------------------------------------------------------------------- */
/* wrapper */
#wrapper {overflow:hidden; width:100%; background:url(../img/common/bg_content.jpg); background-repeat:repeat-y; background-position:center -56px; padding-bottom:180px;}

/* content */
.content {width:1020px; padding:0 8px; margin:0 auto;}

/* lhd（下層ヘッダー） */
#lhd {width:100%; max-width:2560px; height:116px; background:url(../img/common/bg_lhd.png) repeat-x center; margin:0 auto 50px auto;}

#lhd h1 {position:relative; width:1020px; height:116px; margin:50px auto 0 auto; text-indent:100%; white-space:nowrap;}


/* 4.0 - footer
---------------------------------------------------------------------------------------------------------- */
/* footer（wrapper） */
footer {overflow:hidden;}

/* ft_bnr */
#ft_bnr {width:100%; max-width:2560px; height:132px; background:url(../img/common/footer/bg_content.png) repeat; border-bottom:2px solid #000; margin:0 auto;}

/* list（バナー） */
#ft_bnr ul {width:1180px; height:132px; overflow:hidden; text-indent:100%; white-space:nowrap; margin:0 auto;}
#ft_bnr li {float:left; height:132px; 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:204px; height:93px; background:url(../img/common/footer/bnr/bushiroad.png) no-repeat; background-size:contain; margin:16px 12px 0 0;}
#ft_bnr li:nth-child(2) a {width:289px; height:55px; background:url(../img/common/footer/bnr/akatsuki.png) no-repeat; background-size:contain; margin:40px 0 0 0;}
#ft_bnr li:nth-child(3) a {width:322px; height:80px; background:url(../img/common/footer/bnr/official_banner.png) no-repeat; background-size:contain; margin:26px 0 0 353px;}

/* ft_nav-wrapper */
#ft_nav-wrapper {overflow:hidden; width:100%; max-width:2560px; background:url(../img/common/footer/bg_ft.png) repeat; border-top:2px solid #fff; margin:0 auto;}

/* ft_nav */
#ft_nav {position:relative; width:1180px; height:55px; color:#fff; font-size:11px; line-height:1; margin:0 auto; padding:11px 0 0 0;}

/* copyright */
#ft_nav p {line-height:1.6;}

/* list（プライバシーポリシー, お問い合わせ） */
#ft_nav ul {position:absolute; top:22px; right:0; border-left:1px solid #fff;}
#ft_nav li {float:left; border-right:1px solid #fff; padding:0 18px;}
#ft_nav li a {color:#fff;}
#ft_nav li a:hover {opacity:0.7;}

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


}