@charset "utf-8";

/* ----------------------------------------------------------------

   01. Base

----------------------------------------------------------------- */

html{
height:100%;
overflow-y:scroll;
}

body{
height:100%;
background-color:#d2d0c0;
font:14px/1.714 "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
color:#333;
}

img{
vertical-align:bottom;
}

h1,
h2,
h3,
h4,
h5,
h6{
margin:0;
font-size:1em;
}

p{
margin:0;
}

ol,
ul{
margin:0;
padding:0;
}

li{
list-style:none;
}

dl,
dd{
margin:0;
}

small{
font-size:100%;
}

a{
color:#333;
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

object{
vertical-align:bottom;
}



/* ----------------------------------------------------------------

   02. Structure

----------------------------------------------------------------- */

/* container
-------------------------------------------------- */
.container{
margin:0 auto;
padding-bottom:10px;
max-width:1440px;
min-width:980px;
height:auto;
min-height:100%;
background-color:#ebe9d8;
-webkit-box-shadow:0 0 20px rgba(0,0,0,.1);
box-shadow:0 0 20px rgba(0,0,0,.1);
}


/* header
-------------------------------------------------- */
header{
background-color:#000;
-webkit-box-shadow:0 5px 10px rgba(0,0,0,.15);
-moz-box-shadow:0 5px 10px rgba(0,0,0,.15);
box-shadow:0 5px 10px rgba(0,0,0,.15);
}

header .inner{
position:relative;
margin:0 auto;
width:960px;
min-height:75px;
}

header .logo{
position:absolute;
top:14px;
left:0;
}

header .logo-hulu{
position:absolute;
top:14px;
right:160px;
}

header .logo-nod{
position:absolute;
top:14px;
right:0;
}

header .summary{
position:absolute;
top:20px;
left:230px;
padding-left:36px;
background:url(../img/ico_header_01.png) no-repeat;
color:#fff;
font-size:13px;
line-height:1.385;
}


/* contentHeader
-------------------------------------------------- */
/* infoTop */
.infoTop{
position:relative;
text-align:center;
}

.infoTop a{
display:inline-block;
max-width:1440px;
width:100%;
}

.infoTop a:before{
content:"";
display:block;
position:absolute;
top:50%;
left:50%;
width:88px;
height:88px;
margin:-44px 0 0 -44px;
}

.infoTop.play a:before{
background:url(../img/ico_play_02.png) no-repeat 50% 50%;
}

.infoTop.menu a:before{
background:url(../img/ico_menu_02.png) no-repeat 50% 50%;
}

/*.infoTop a:hover:after{
content:"";
display:block;
position:absolute;
top:50%;
left:50%;
width:88px;
height:88px;
margin:-44px 0 0 -44px;
background:url(../img/ico_play_02.png) no-repeat 50% 50%;
}*/

.infoTop .thumbnail img{
max-width:1440px;
width:100%;
max-height:662px;
height:100%;
}

.infoTop .caption{
position:absolute;
bottom:22px;
left:50%;
margin-left:-480px;
width:960px;
text-align:left;
overflow-wrap:break-word;
word-wrap:break-word;
}

.infoTop .days{
line-height:1;
}

.infoTop .days span{
display:inline-block;
min-width:60px;
padding:0 10px;
height:20px;
background-color:#ff005a;
font-size:12px;
line-height:20px;
color:#fff;
text-align:center;
vertical-align:top;
}

.infoTop .is-new span {
display: inline-block;
min-width: 60px;
padding: 0 10px;
height: 28px;
background: linear-gradient(to bottom, #fb964b, #ff6000);
font-size: 16px;
font-weight: bold;
line-height: 28px;
color: #fff;
text-align: center;
vertical-align: top;
letter-spacing: 2px;
}

.infoTop .days em{
font-style:normal;
font-weight:bold;
}

.infoTop .sponsored span{
display:inline-block;
min-width:60px;
padding:0 10px;
height:20px;
background-color:#0000ff;
font-size:12px;
line-height:20px;
color:#fff;
text-align:center;
vertical-align:top;
}

.infoTop .title{
font-weight:normal;
}

.infoTop .title span{
display:inline-block;
margin-top:5px;
padding:5px 10px;
background-color:#000;
background-color:rgba(0,0,0,.5);
font-size:36px;
line-height:1.333;
color:#fff;
max-width:940px;
}

.infoTop .date span{
display:inline-block;
margin-top:5px;
padding:5px 10px;
background-color:#000;
background-color:rgba(0,0,0,.5);
font-size:16px;
line-height:1.333;
color:#fff;
max-width:940px;
}

.infoTop .date .time{
padding-left:0;
}

.infoTop .progress{
position:absolute;
bottom:0;
left:0;
width:100%;
max-width:1440px;
height:5px;
background-color:rgba(0,0,0,.3);
}

.infoTop .bar{
position:absolute;
bottom:0;
left:0;
width:50%;
max-width:1440px;
height:5px;
background-color:#ff005a;
}

/* infoCategory */
.infoCategory{
text-align:center;
}

.infoCategory img{
max-width:1440px;
width:100%;
height:auto;
}

.infoCategory img.list{
max-width:1440px;
width:100%;
max-height:287px;
height:100%;
}

/* infoDetail */
.infoDetail{
background-color:#000;
}

.infoDetail .movie{
margin:0 auto;
width:960px;
height:540px;
}

.infoDetail .expire{
border:2px solid #333;
height:536px;
}

.infoDetail .expire .text{
margin-top:110px;
color:#fff;
font-size:18px;
text-align:center;
}

.infoDetail .expire .relatedMovie{
position:relative;
margin-top:50px;
text-align:center;
}

.infoDetail .expire .relatedMovie a:before{
content:"";
display:block;
position:absolute;
top:50%;
left:50%;
width:62px;
height:62px;
margin:-31px 0 0 -31px;
background:url(../img/ico_play_01.png) no-repeat 50% 50%;
}

.infoDetail .caption{
margin:0 auto;
padding:12px 0;
width:960px;
}

.infoDetail .title{
float:left;
font-size:16px;
font-weight:normal;
line-height:1.375;
color:#fff;
max-width:960px;
overflow-wrap:break-word;
word-wrap:break-word;
}

.infoDetail .date{
display:block;
}

.infoDetail .days{
float:right;
display:inline-block;
min-width:60px;
padding:0 10px;
height:20px;
background-color:#ff005a;
font-size:12px;
line-height:20px;
color:#fff;
text-align:center;
vertical-align:top;
}

.infoDetail .days em{
font-style:normal;
font-weight:bold;
}

/* alert
-------------------------------------------------- */
.alert{
background-color:#ff005a;
color:#fff;
text-align:center;
font-weight:bold;
font-size:128.6%;
}

/* main
-------------------------------------------------- */
main{
margin:0 auto;
width:960px;
/*min-height:350px;*/
}


/* footer
-------------------------------------------------- */
footer{
margin-top:50px;
}

footer nav{
padding-bottom:5px;
border-bottom:1px solid #cccabc;
}

footer nav ul{
text-align:center;
}

footer nav li{
display:inline-block;
padding:0 10px;
font-size:13px;
line-height:1.385;
}

footer nav a{
color:#808080;
}

footer .inner{
margin:20px auto 0;
width:960px;
}

footer .reg{
float:left;
}

footer .reg li{
float:left;
margin-right:20px;
}

footer .reg .license{
position:relative;
padding-left:60px;
font-size:11px;
line-height:1.3;
color:#000;
}

footer .reg .license img{
position:absolute;
top:0;
left:0;
}

footer .logo{
float:right;
}

footer .copyright{
margin-top:20px;
text-align:center;
font-size:12px;
color:#444;
}

/* print
-------------------------------------------------- */

@media print {
	img.printhide {
		visibility: hidden !important;
	}

	#programmain {
		visibility: hidden !important;
	}
}

/* ----------------------------------------------------------------

   03. Modules

----------------------------------------------------------------- */

/* clearfix
-------------------------------------------------- */
.cf:before,
.cf:after {
content:"";
display:table;
}

.cf:after {
clear:both;
}


/* paragraph
-------------------------------------------------- */
/* pgh01 */
.pgh01{
margin-top:20px;
}

/* pgh02 */
.pgh02{
float:right;
font-weight:bold;
font-size:15px;
}

.pgh02 a{
display:inline-block;
padding-left:15px;
background:url(../img/ico_arrow_01.png) no-repeat 0 .4em;
}


/* btn
-------------------------------------------------- */
/* snsBtn */
.snsBtn{
margin-top:20px;
}

.snsBtn ul{
display:table;
}

.snsBtn ul.play{
float:left;
}

.snsBtn li{
display:table-cell;
padding-right:10px;
vertical-align:top;
}

.twitter-share-button{
width:105px !important;
}

.sns-field {
  padding-top:20px;
  margin:0 auto !important;
  width:960px !important;
}


/* list
-------------------------------------------------- */
/* programList */
.programList ul{
margin-right:-30px;
width:990px;
}

.programList li{
position:relative;
float:left;
margin:40px 30px 0 0;
width:300px;
height:170px;
}

.programList li a:before{
content:"";
display:block;
position:absolute;
top:50%;
left:50%;
width:62px;
height:62px;
margin:-31px 0 0 -31px;
}

.programList li a:not(.off-air):before{
background:url(../img/ico_play_01.png) no-repeat 50% 50%;
}

.programList li span.menu a:before{
position:absolute;
bottom:0;
top:97%;
left:100%;
width:25px;
height:25px;
background:url(../img/ico_menu_03.png) no-repeat 100% 50%;
color:#fff;
}

.programList .banner a:before{
display:none;
}

.programList li.menu a:before{
background:url(../img/ico_menu.png) no-repeat 50% 50%;
}

.programList li.is-new .thumbnail:after {
content:"";
display:block;
width:60px;
height:60px;
background:url(../img/ico_new_01.png) no-repeat 50% 50%;
background-size: contain;
position:absolute;
left:-15px;
top:-28px;
z-index:1;
}

/*.programList li a:hover:after{
content:"";
display:block;
position:absolute;
top:50%;
left:50%;
width:62px;
height:62px;
margin:-31px 0 0 -31px;
background:url(../img/ico_play_01.png) no-repeat 50% 50%;
}

.programList .banner a:hover:after{
display:none;
}*/

.programList .thumbnail{
border:2px solid #fff;
}

.programList .banner .thumbnail{
border:none;
}

.programList .caption{
position:absolute;
bottom:2px;
left:2px;
padding:5px 10px;
width:276px;
background-color:#000;
background-color:rgba(0,0,0,.8);
font-size:12px;
line-height:1.333;
color:#fff;
overflow-wrap:break-word;
word-wrap:break-word;
}

.programList .caption .title{
font-weight:normal;
}

.programList .caption .date{
display:block;
color:#808080;
}

.programList .caption .tag-line {
font-size: 10px;
line-height: 1.2;
color: #808080;
}

.programList .caption .date span{
margin-left:5px;
}

.programList .days{
position:absolute;
top:0;
left:0;
display:inline-block;
min-width:60px;
padding:0 10px;
height:20px;
background-color:#ff005a;
font-size:12px;
line-height:20px;
color:#fff;
text-align:center;
vertical-align:top;
}

.programList .sponsoredDays{
position:absolute;
top:0;
left:0;
width: 280px;
display:inline-block;
min-width:60px;
padding:0 10px;
height:20px;
background-color:#0000ff;
font-size:12px;
line-height:20px;
color:#fff;
text-align:left;
vertical-align:top;
float: left;
}

.programList .sponsoredLabel{
position:absolute;
top:0;
left:0;
width: 280px;
display:inline-block;
min-width:60px;
padding:0 10px;
height:20px;
font-size:12px;
line-height:20px;
color:#fff;
text-align:right;
vertical-align:top;
}

.programList .days em{
font-style:normal;
font-weight:bold;
}

.programList .progress{
position:absolute;
bottom:2px;
left:2px;
width:296px;
height:3px;
background-color:rgba(0,0,0,.6);
}

.programList .bar{
position:absolute;
bottom:0;
left:0;
max-width:296px;
height:3px;
background-color:#ff005a;
}

.programList .btn_more {
margin: 40px auto 40px;
text-align: center;
}
.programList .btn_more a {
width: 240px;
display: inline-block;
padding: 15px 60px;
line-height: 0;
font-size: 18px;
font-weight: bold;
border: 2px solid #000;
text-decoration: none;
}
.programList .btn_more a .icon-plus {
position: relative;
width: 25px;
height: 20px;
display: inline-block;
vertical-align: text-bottom;
margin-right: -15px;
}
.programList .btn_more a .icon-plus:before {
content: '';
width: 2px;
height: 10px;
display: block;
background-color: #000;
position: absolute;
top: calc(50% - 5px);
left: calc(50% - 1px);
}
.programList .btn_more a .icon-plus:after {
content: '';
width: 10px;
height: 2px;
display: block;
background-color: #000;
position: absolute;
top: calc(50% - 1px);
left: calc(50% - 5px);
}

/* play
-------------------------------------------------- */
.movie_thumb{
width:960px;
margin:0 auto;
position:relative;
}
.movie_thumb a:before{
content:"";
display:block;
position:absolute;
top:50%;
left:50%;
width:88px;
height:88px;
margin:-44px 0 0 -44px;
background:url(../img/ico_play_02.png) no-repeat 50% 50%;
}

/* linkArea
-------------------------------------------------- */

body #linkArea{
	width:950px;
	background:#7bb93d;
	border:#fff 5px solid;
	text-align:center;
}

body #linkArea a{
	background:#7bb93d url(../img/hulu_bnr_arrow.png) no-repeat 890px center;
	padding:25px 0;
	display:block;
}

body #linkArea a:hover {
	text-decoration: none;
	/*filter: alpha(opacity=70);*/
	-moz-opacity:0.7;
	opacity:0.7;
}

body #linkArea p.txt{
	height:44px;
	margin:0 0 15px;
	background:url(../img/hulu_bnr_txt.png) no-repeat center 0;
	text-indent:-9999px;
}


/* announcement
-------------------------------------------------- */

body .announcement{
	width:926px;
	margin: 20px auto auto;
	padding:12px 15px;
	border:#ff005a 3px solid;
}

/* campaignBanner
-------------------------------------------------- */

.campaignBanner{
  text-align: center;
  padding-bottom: 10px;
}

.campaignBanner img{
  max-width: 1440px;
  position: relative;
}

.tabContent .campaignBanner{
  padding-bottom: 10px;
}

#tada-pannel .campaignBanner img{
  max-width: 1440px;
  width: 100%;
}

/* notFound
-------------------------------------------------- */
.notFound{
  margin-bottom:200px;
  text-align:center;
}

.notFound h1{
  padding-top:50px;
  font-size:20px;
}

.notFound p{
  padding-top:30px;
  font-size:14px;
}


/* static
-------------------------------------------------- */
.st h1{
padding-top:40px;
font-size:20px;
}

.st h2{
padding-top:30px;
font-size:16px;
}

.st h3{
padding-top:15px;
}

.st h4{
padding-top:10px;
font-weight:normal;
}

.st p{
padding-top:20px;
}

.st h2 + p{
padding-top:10px;
}

.st h3 + p{
padding-top:5px;
}

.st h4 + p{
padding-top:0;
}

.st dt{
position:relative;
margin-top:10px;
padding-left:2.5em;
}

.st dd{
position:relative;
margin-top:5px;
padding-left:2.5em;
}

.st dt span,
.st dd span{
position:absolute;
top:0;
left:0;
}

.st ul{
margin-top:20px;
}

.st h2 + ul{
margin-top:10px;
}

.st li{
position:relative;
margin-top:5px;
padding-left:2em;
}

.st li span{
position:absolute;
top:0;
left:0;
}

.st a{
text-decoration:underline;
}

.st a:hover{
text-decoration:none;
}

.summary {
  display: none;
}