@charset "Shift_JIS";

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


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


.sp_header_black table td,
.sp_footer_white table td{
vertical-align:middle;
}


.sp_footer_black a:link,
.sp_footer_black a:visited,
.sp_footer_white a:link,
.sp_footer_white a:visited {
  text-decoration: none;
}

.sp_footer_black a:hover,
.sp_footer_black a:active,
.sp_footer_white a:hover,
.sp_footer_white a:active {
  text-decoration: underline;
}

.sp_header_black,
.sp_header_white,
.sp_footer_black,
.sp_footer_white{
  margin: 0;
  padding: 0;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  letter-spacing:normal;
}

.sp_header_black ol,
.sp_header_black ul,
.sp_header_black li,
.sp_header_white ol,
.sp_header_white ul,
.sp_header_white li,
.sp_footer_black ol,
.sp_footer_black ul,
.sp_footer_black li,
.sp_footer_white ol,
.sp_footer_white ul,
.sp_footer_white li
{
  list-style: none;
  margin:0;
  padding:0;
}

.sp_header_black img,
.sp_header_black fieldset,
.sp_header_white img,
.sp_header_white fieldset,
.sp_footer_black img,
.sp_footer_black fieldset,
.sp_footer_white img,
.sp_footer_white 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_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;
}



/* sp_footer（黒・白）
----------------------------------------------------------------------------- */
.sp_footer_black,
.sp_footer_white{
width:100%;
height:39px;
margin:0;
padding:0;
}

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

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

/* ナビゲーション */
.sp_footer_black .sp_navigation,
.sp_footer_white .sp_navigation{
padding:13px 0 0 10px;
}

.sp_footer_black .sp_navigation ul,
.sp_footer_white .sp_navigation ul{
width:570px;
height:15px;
margin-left:10px;
}

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

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

.sp_footer_black .sp_navigation li,
.sp_footer_white .sp_navigation li{
float:left;
}

.sp_footer_black .sp_navigation li a,
.sp_footer_white .sp_navigation li a{
margin-left:31px;
text-indent:-9999px;
display:block;
}
.sp_footer_black .sp_navigation .firstItem,
.sp_footer_white .sp_navigation .firstItem{
border-left:none;
margin-left:0px;
padding-left:0px;
}


/* 各ボタン（黒） */
.sp_footer_black ul .movie a,
.sp_footer_black ul .movie a:link {
width:23px;
height:15px;
background: transparent url("../sp_site/img/black_item_movie.gif") no-repeat 0 0;
display:block;
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;
height:15px;
background: transparent url("../sp_site/img/black_item_drama.gif") no-repeat 0 0;
display:block;
}
.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;
height:15px;
background: transparent url("../sp_site/img/black_item_sports.gif") no-repeat 0 0;
display:block;
}
.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;
height:15px;
background: transparent url("../sp_site/img/black_item_music.gif") no-repeat 0 0;
display:block;
}
.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;
height:15px;
background: transparent url("../sp_site/img/black_item_stage.gif") no-repeat 0 0;
display:block;
}
.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;
height:15px;
background: transparent url("../sp_site/img/black_item_anime.gif") no-repeat 0 0;
display:block;
}
.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;
height:15px;
background: transparent url("../sp_site/img/black_item_documentary.gif") no-repeat 0 0;
display:block;
}
.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;
height:15px;
background: transparent url("../sp_site/img/black_item_extra.gif") no-repeat 0 0;
display:block;
}
.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;
height:15px;
background: transparent url("../sp_site/img/white_item_movie.gif") no-repeat 0 0;
display:block;
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;
height:15px;
background: transparent url("../sp_site/img/white_item_drama.gif") no-repeat 0 0;
display:block;
}
.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;
height:15px;
background: transparent url("../sp_site/img/white_item_sports.gif") no-repeat 0 0;
display:block;
}
.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;
height:15px;
background: transparent url("../sp_site/img/white_item_music.gif") no-repeat 0 0;
display:block;
}
.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;
height:15px;
background: transparent url("../sp_site/img/white_item_stage.gif") no-repeat 0 0;
display:block;
}
.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;
height:15px;
background: transparent url("../sp_site/img/white_item_anime.gif") no-repeat 0 0;
display:block;
}
.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;
height:15px;
background: transparent url("../sp_site/img/white_item_documentary.gif") no-repeat 0 0;
display:block;
}
.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;
height:15px;
background: transparent url("../sp_site/img/white_item_extra.gif") no-repeat 0 0;
display:block;
}
.sp_footer_white ul .extra a:hover {
background: transparent url("../sp_site/img/white_item_extra_on.gif") no-repeat 0 0;
}






/* コピーライト */
.sp_footer_black .sp_copyright,
.sp_footer_white .sp_copyright{
text-align:right;
padding:12px 10px 0 10px;
}

/* コピーライトの文字色（黒） */
.sp_footer_black .sp_copyright .copyright{
width:138px;
height:15px;
background: transparent url("../sp_site/img/black_item_copy.gif") no-repeat 0 0;
text-indent:-9999px;
margin:0;
padding:0;
float:right;
}

/* コピーライトの文字色（白） */
.sp_footer_white .sp_copyright p{
width:138px;
height:15px;
background: transparent url("../sp_site/img/white_item_copy.gif") no-repeat 0 0;
text-indent:-9999px;
margin:0;
padding:0;
float:right;
}