@charset "Shift_JIS";

/* =================================================================================================
   WOWOW ONLINE - SP用ヘッダ・フッタのCSS
   http://www.wowow.co.jp/
   Copyright (C) WOWOW INC. ALL RIGHTS RESERVED.
================================================================================================= */

html{
	min-width:982px;
}

.sp_area{
	display:none;
}

/* 表組をリセット */
table,
tr,
td{
	padding:0px;
	margin:0px;
	border-collapse:collapse;
}


/* reset
----------------------------------------------------------------------------- */
body,p {
	margin: 0;
	padding: 0;
}

#sp_footer a:link,
#sp_footer a:visited{
	text-decoration: none;
}

#sp_footer a:hover,
#sp_footer a:active{
	text-decoration: underline;
}

#sp_header,
#sp_footer{
	margin: 0;
	padding: 0;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	letter-spacing:normal;
}

#sp_header ol,
#sp_header ul,
#sp_header li,
#sp_footer ol,
#sp_footer ul,
#sp_footer li
{
	list-style: none;
	margin:0;
	padding:0;
}

#sp_header img,
#sp_header fieldset,
#sp_footer img,
#sp_footer fieldset
{
	border: 0;
}


/* clearfix
----------------------------------------------------------------------------- */
.clearfix {
	display: inline-block;
}

/* Exclude Mac IE \*/
.clearfix {
	display: block;
}
/**/

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}


/* float
----------------------------------------------------------------------------- */
.floatLeft {
	float:left;
}

.floatRight {
	float:right;
}


/* sp_header（黒・白）※新スタイル
----------------------------------------------------------------------------- */
#sp_header{
	width:100%;
	height:39px;
	margin:0;
	padding:0;
	position:relative;
}

/* 背景と罫線の色（黒） */
.new_sp_header_black{
	border-bottom:1px solid #8C8C8C;
	background: url("/common/sp_site/img/black_header_bg.jpg") repeat-x;
	background-color:#000;
}

/* 背景と罫線の色（白） */
.new_sp_header_white{
	border-bottom:1px solid #8C8C8C;
	background: url("/common/sp_site/img/white_header_bg.jpg") repeat-x;
	background-color:#fff;
}

/* WOWOWロゴ */
#sp_header #rogo{
	position:absolute;
	top:13px;
	left:10px;
	line-height:0;/*reset*/
	line-height:1;
	font-size:0;/*reset*/
	font-size:100%;
}
#sp_header #rogo img{
	vertical-align:top;
}
/* WOWOWメンバーズオンデマンド */
#sp_header .ch_mod{
	text-indent:-9999px;
	position:absolute;
	top:7px;
	left:440px;
}
#sp_header .ch_mod,
#sp_header .ch_mod a{
	width:74px;
	height:25px;
	display:block;
	outline:0;
}
.new_sp_header_black .ch_mod,
.new_sp_header_black .ch_mod a{
	background: url("/common/sp_site/img/black_ch_mod.jpg") 0 0 no-repeat;
}
.new_sp_header_black .ch_mod a:hover{
	background: url("/common/sp_site/img/black_ch_mod_on.jpg") 0 0 no-repeat;
}
.new_sp_header_white .ch_mod,
.new_sp_header_white .ch_mod a{
	background: url("/common/sp_site/img/white_ch_mod.jpg") 0 0 no-repeat;
}
.new_sp_header_white .ch_mod a:hover{
	background: url("/common/sp_site/img/white_ch_mod_on.jpg") 0 0 no-repeat;
}


/* 3チャンネル放送暫定対応 */
#sp_header .ch_title{
	text-indent:-9999px;
	position:absolute;
	top:7px;
	left:440px;
}
#sp_header .ch_title,
#sp_header .ch_title a{
	width:74px;
	height:25px;
	display:block;
	outline:0;
}
.new_sp_header_black .ch_title,
.new_sp_header_black .ch_title a{
	background: url("/common/sp_site/img/black_ch_mod.jpg") 0 0 no-repeat;
}
.new_sp_header_black .ch_title a:hover{
	background: url("/common/sp_site/img/black_ch_mod_on.jpg") 0 0 no-repeat;
}
.new_sp_header_white .ch_title,
.new_sp_header_white .ch_title a{
	background: url("/common/sp_site/img/white_ch_mod.jpg") 0 0 no-repeat;
}
.new_sp_header_white .ch_title a:hover{
	background: url("/common/sp_site/img/white_ch_mod_on.jpg") 0 0 no-repeat;
}






/* 3チャンネルボタン */
#sp_header .ch_prime,
#sp_header .ch_live,
#sp_header .ch_cinema{
	text-indent:-9999px;
	position:absolute;
	top:7px;
	width:78px;
	height:25px;
	display:block;
}
#sp_header .ch_prime{
	left:155px;
}
#sp_header .ch_live{
	left:243px;
}
#sp_header .ch_cinema{
	left:333px;
}

#sp_header .ch_prime a,
#sp_header .ch_live a,
#sp_header .ch_cinema a{
	width:78px;
	height:25px;
	display:block;
	outline:0;
}

/* WOWOWプライム */
#sp_header .ch_prime,
#sp_header .ch_prime a{
	background: url("/common/sp_site/img/ch_prime.jpg") 0 0 no-repeat;
}
#sp_header .ch_prime a:hover{
	background: url("/common/sp_site/img/ch_prime_on.jpg") 0 0 no-repeat;
}

/* WOWOWライブ */
#sp_header .ch_live,
#sp_header .ch_live a{
	background: url("/common/sp_site/img/ch_live.jpg") 0 0 no-repeat;
}
#sp_header .ch_live a:hover{
	background: url("/common/sp_site/img/ch_live_on.jpg") 0 0 no-repeat;
}

/* WOWOWシネマ */
#sp_header .ch_cinema,
#sp_header .ch_cinema a{
	background: url("/common/sp_site/img/ch_cinema.jpg") 0 0 no-repeat;
}
#sp_header .ch_cinema a:hover{
	background: url("/common/sp_site/img/ch_cinema_on.jpg") 0 0 no-repeat;
}


/* 加入ボタン */
#sp_header .sp_join{
	text-indent:-9999px;
	position:absolute;
	top:7px;
	right:10px;
}
#sp_header .sp_join,
#sp_header .sp_join a{
	width:206px;
	height:26px;
	display:block;
	outline:0;
}
.new_sp_header_black .sp_join,
.new_sp_header_black .sp_join a{
	background: url("/common/sp_site/img/black_join.gif") 0 0 no-repeat;
}
.new_sp_header_black .sp_join a:hover{
	background: url("/common/sp_site/img/black_join_on.gif") 0 0 no-repeat;
}
.new_sp_header_white .sp_join,
.new_sp_header_white .sp_join a{
	background: url("/common/sp_site/img/white_join.gif") 0 0 no-repeat;
}
.new_sp_header_white .sp_join a:hover{
	background: url("/common/sp_site/img/white_join_on.gif") 0 0 no-repeat;
}


/* 982px固定用 */
.nowrap_box{
	width:982px;
	height:0px;
	line-height:0%;
	text-decoration:none;
	font-size:0px;
}


/* sp_footer（黒・白）※新スタイル
----------------------------------------------------------------------------- */
#sp_footer{
	width:100%;
	height:39px;
	margin:0;
	padding:0;
	position:relative;
}

/* 背景と罫線の色（黒） */
.sp_footer_black{
	border-top:1px solid #555;
	background-color:#000;
}

/* 背景と罫線の色（白） */
.sp_footer_white{
	border-top:1px solid #8C8C8C;
	background-color:#fff;
}

/* ナビゲーション */
#sp_footer #gnav{
	padding:13px 0 0 10px;
}
#sp_footer #gnav ul{
	width:570px;
	height:15px;
	margin-left:10px;
}

.sp_footer_black #gnav ul{
	background: transparent url("../sp_site/img/black_bg.gif") no-repeat 0 0;
}

.sp_footer_white #gnav ul{
	background: transparent url("../sp_site/img/white_bg.gif") no-repeat 0 0;
}

#sp_footer #gnav ul li{
	float:left;
}

#sp_footer #gnav ul li a{
	margin-left:31px;
	text-indent:-9999px;
	display:block;
	height:15px;
}

#sp_footer #gnav ul .movie,
#sp_footer #gnav ul .movie a{
	margin-left:0px;
	padding-left:0px;
}


/* 各ボタン（黒） */
.sp_footer_black ul .movie a,
.sp_footer_black ul .movie a:link {
	width:23px;
	background: transparent url("../sp_site/img/black_item_movie.gif") no-repeat 0 0;
	margin-left:0;
}
.sp_footer_black ul .movie a:hover {
	background: transparent url("../sp_site/img/black_item_movie_on.gif") no-repeat 0 0;
}

.sp_footer_black ul .drama a,
.sp_footer_black ul .drama a:link {
	width:29px;
	background: transparent url("../sp_site/img/black_item_drama.gif") no-repeat 0 0;
}
.sp_footer_black ul .drama a:hover {
	background: transparent url("../sp_site/img/black_item_drama_on.gif") no-repeat 0 0;
}

.sp_footer_black ul .sports a,
.sp_footer_black ul .sports a:link {
	width:44px;
	background: transparent url("../sp_site/img/black_item_sports.gif") no-repeat 0 0;
}
.sp_footer_black ul .sports a:hover {
	background: transparent url("../sp_site/img/black_item_sports_on.gif") no-repeat 0 0;
}

.sp_footer_black ul .music a,
.sp_footer_black ul .music a:link {
	width:23px;
	background: transparent url("../sp_site/img/black_item_music.gif") no-repeat 0 0;
}
.sp_footer_black ul .music a:hover {
	background: transparent url("../sp_site/img/black_item_music_on.gif") no-repeat 0 0;
}

.sp_footer_black ul .stage a,
.sp_footer_black ul .stage a:link {
	width:46px;
	background: transparent url("../sp_site/img/black_item_stage.gif") no-repeat 0 0;
}
.sp_footer_black ul .stage a:hover {
	background: transparent url("../sp_site/img/black_item_stage_on.gif") no-repeat 0 0;
}

.sp_footer_black ul .anime a,
.sp_footer_black ul .anime a:link {
	width:32px;
	background: transparent url("../sp_site/img/black_item_anime.gif") no-repeat 0 0;
}
.sp_footer_black ul .anime a:hover {
	background: transparent url("../sp_site/img/black_item_anime_on.gif") no-repeat 0 0;
}

.sp_footer_black ul .documentary a,
.sp_footer_black ul .documentary a:link {
	width:89px;
	background: transparent url("../sp_site/img/black_item_documentary.gif") no-repeat 0 0;
}
.sp_footer_black ul .documentary a:hover {
	background: transparent url("../sp_site/img/black_item_documentary_on.gif") no-repeat 0 0;
}

.sp_footer_black ul .extra a,
.sp_footer_black ul .extra a:link {
	width:57px;
	background: transparent url("../sp_site/img/black_item_extra.gif") no-repeat 0 0;
}
.sp_footer_black ul .extra a:hover {
	background: transparent url("../sp_site/img/black_item_extra_on.gif") no-repeat 0 0;
}


/* 各ボタン（白） */
.sp_footer_white ul .movie a,
.sp_footer_white ul .movie a:link {
	width:23px;
	background: transparent url("../sp_site/img/white_item_movie.gif") no-repeat 0 0;
	margin-left:0;
}
.sp_footer_white ul .movie a:hover {
	background: transparent url("../sp_site/img/white_item_movie_on.gif") no-repeat 0 0;
}

.sp_footer_white ul .drama a,
.sp_footer_white ul .drama a:link {
	width:29px;
	background: transparent url("../sp_site/img/white_item_drama.gif") no-repeat 0 0;
}
.sp_footer_white ul .drama a:hover {
	background: transparent url("../sp_site/img/white_item_drama_on.gif") no-repeat 0 0;
}

.sp_footer_white ul .sports a,
.sp_footer_white ul .sports a:link {
	width:44px;
	background: transparent url("../sp_site/img/white_item_sports.gif") no-repeat 0 0;
}
.sp_footer_white ul .sports a:hover {
	background: transparent url("../sp_site/img/white_item_sports_on.gif") no-repeat 0 0;
}

.sp_footer_white ul .music a,
.sp_footer_white ul .music a:link {
	width:23px;
	background: transparent url("../sp_site/img/white_item_music.gif") no-repeat 0 0;
}
.sp_footer_white ul .music a:hover {
	background: transparent url("../sp_site/img/white_item_music_on.gif") no-repeat 0 0;
}

.sp_footer_white ul .stage a,
.sp_footer_white ul .stage a:link {
	width:46px;
	background: transparent url("../sp_site/img/white_item_stage.gif") no-repeat 0 0;
}
.sp_footer_white ul .stage a:hover {
	background: transparent url("../sp_site/img/white_item_stage_on.gif") no-repeat 0 0;
}

.sp_footer_white ul .anime a,
.sp_footer_white ul .anime a:link {
	width:32px;
	background: transparent url("../sp_site/img/white_item_anime.gif") no-repeat 0 0;
}
.sp_footer_white ul .anime a:hover {
	background: transparent url("../sp_site/img/white_item_anime_on.gif") no-repeat 0 0;
}

.sp_footer_white ul .documentary a,
.sp_footer_white ul .documentary a:link {
	width:89px;
	background: transparent url("../sp_site/img/white_item_documentary.gif") no-repeat 0 0;
}
.sp_footer_white ul .documentary a:hover {
	background: transparent url("../sp_site/img/white_item_documentary_on.gif") no-repeat 0 0;
}

.sp_footer_white ul .extra a,
.sp_footer_white ul .extra a:link {
	width:57px;
	background: transparent url("../sp_site/img/white_item_extra.gif") no-repeat 0 0;
}
.sp_footer_white ul .extra a:hover {
	background: transparent url("../sp_site/img/white_item_extra_on.gif") no-repeat 0 0;
}


/* コピーライト */
#sp_footer address{
	position:absolute;
	top:12px;
	right:10px;
	text-indent:-9999px;
	font-size:0px;
	line-height:0%;
	text-decoration:none;
	width:138px;
	height:15px;
	margin:0;
	padding:0;
}

/* コピーライトの文字色（黒） */
.sp_footer_black address{
	background: transparent url("../sp_site/img/black_item_copy.gif") no-repeat 0 0;
}

/* コピーライトの文字色（白） */
.sp_footer_white address{
	background: transparent url("../sp_site/img/white_item_copy.gif") no-repeat 0 0;
}


/* フッタ下プラットフォーム切替 */
#sp_platform_change{
	padding:18px 0;
	text-align:center;
	background-color:#fff;
}
#sp_platform_change li{
	text-align:center;
	display:inline;
}
#sp_platform_change li a{
	color:#000;
}




/* sp_header（黒・白）※旧スタイル
----------------------------------------------------------------------------- */
.sp_header_black,
.sp_header_white{
width:100%;
height:39px;
margin:0;
padding:0;
}


/* 背景と罫線の色（黒） */
.sp_header_black{
border-bottom:1px solid #8C8C8C;
background: url("/common/sp_site/img/black_header_bg.jpg") repeat-x;
background-color:#000;
}

/* 背景と罫線の色（白） */
.sp_header_white{
border-bottom:1px solid #8C8C8C;
background: url("/common/sp_site/img/white_header_bg.jpg") repeat-x;
background-color:#fff;
}

/* WOWOWロゴ */
.sp_header_black .sp_logo,
.sp_header_white .sp_logo{
padding:6px 19px 0 10px;
width:1%;
white-space:nowrap;
}


/* 3チャンネルスタート */
.sp_header_black .ch_start,
.sp_header_white .ch_start{
padding:7px 15px 0 0px;
width:1%;
white-space:nowrap;
text-indent:-9999px;
}
.sp_header_black .ch_start p,
.sp_header_white .ch_start p,
.sp_header_black .ch_start p a,
.sp_header_white .ch_start p a{
width:206px;
height:26px;
display:block;
outline:0;
}
.sp_header_black .ch_start p,
.sp_header_black .ch_start p a{
background: url("/common/sp_site/img/black_ch_start.jpg") 0 0 no-repeat;
}
.sp_header_black .ch_start a:hover{
background: url("/common/sp_site/img/black_ch_start_on.jpg") 0 0 no-repeat;
}
.sp_header_white .ch_start p,
.sp_header_white .ch_start p a{
background: url("/common/sp_site/img/white_ch_start.jpg") 0 0 no-repeat;
}
.sp_header_white .ch_start a:hover{
background: url("/common/sp_site/img/white_ch_start_on.jpg") 0 0 no-repeat;
}


/* 3チャンネルボタン */
.sp_header_black .ch_prime,
.sp_header_white .ch_prime,
.sp_header_black .ch_live,
.sp_header_white .ch_live,
.sp_header_black .ch_cinema,
.sp_header_white .ch_cinema{
	padding:6px 10px 0 0;
	width:1%;
	white-space:nowrap;
	text-indent:-9999px;
}

.sp_header_black .ch_prime p,
.sp_header_white .ch_prime p,
.sp_header_black .ch_live p,
.sp_header_white .ch_live p,
.sp_header_black .ch_cinema p,
.sp_header_white .ch_cinema p,
.sp_header_black .ch_prime p a,
.sp_header_white .ch_prime p a,
.sp_header_black .ch_live p a,
.sp_header_white .ch_live p a,
.sp_header_black .ch_cinema p a,
.sp_header_white .ch_cinema p a{
	width:78px;
	height:25px;
	display:block;
	outline:0;
}

/* WOWOWプライム */
.sp_header_black .ch_prime p,
.sp_header_white .ch_prime p,
.sp_header_black .ch_prime p a,
.sp_header_white .ch_prime p a{
background: url("/common/sp_site/img/ch_prime.jpg") 0 0 no-repeat;
}
.sp_header_black .ch_prime p a:hover,
.sp_header_white .ch_prime p a:hover{
background: url("/common/sp_site/img/ch_prime_on.jpg") 0 0 no-repeat;
}

/* WOWOWライブ */
.sp_header_black .ch_live p,
.sp_header_white .ch_live p,
.sp_header_black .ch_live p a,
.sp_header_white .ch_live p a{
background: url("/common/sp_site/img/ch_live.jpg") 0 0 no-repeat;
}
.sp_header_black .ch_live p a:hover,
.sp_header_white .ch_live p a:hover{
background: url("/common/sp_site/img/ch_live_on.jpg") 0 0 no-repeat;
}

/* WOWOWシネマ */
.sp_header_black .ch_cinema p,
.sp_header_white .ch_cinema p,
.sp_header_black .ch_cinema p a,
.sp_header_white .ch_cinema p a{
background: url("/common/sp_site/img/ch_cinema.jpg") 0 0 no-repeat;
}
.sp_header_black .ch_cinema p a:hover,
.sp_header_white .ch_cinema p a:hover{
background: url("/common/sp_site/img/ch_cinema_on.jpg") 0 0 no-repeat;
}



/* 加入ボタン */
.sp_header_black .sp_join,
.sp_header_white .sp_join{
padding:6px 10px 0 0px;
width:99%;
text-indent:-9999px;
}

.sp_header_black .sp_join p,
.sp_header_white .sp_join p{
	float:right;
}

.sp_header_black .sp_join p,
.sp_header_white .sp_join p,
.sp_header_black .sp_join p a,
.sp_header_white .sp_join p a{
width:206px;
height:26px;
display:block;
outline:0;

}
.sp_header_black .sp_join p,
.sp_header_black .sp_join p a{
background: url("/common/sp_site/img/black_join.gif") 0 0 no-repeat;
}
.sp_header_black .sp_join p a:hover{
background: url("/common/sp_site/img/black_join_on.gif") 0 0 no-repeat;
}

.sp_header_white .sp_join p,
.sp_header_white .sp_join p a{
background: url("/common/sp_site/img/white_join.gif") 0 0 no-repeat;
}
.sp_header_white .sp_join p a:hover{
background: url("/common/sp_site/img/white_join_on.gif") 0 0 no-repeat;
}