
/* 2016.01.29
============================================================= */
@import url("list.css") screen and (min-width: 640px);
@import url("list_sp.css") screen and (max-width: 640px);
@import url("pub.css") screen and (min-width: 640px);
@import url("pub_sp.css") screen and (max-width: 640px);
@import url("print.css") print;

/* 一部　/common/css/pub_style CSS Document 引用 BSフジ　PubページMT用 */
/* 		初期設定		---------------------------------------------- */
br .fclear { clear:both; }
.clear { clear:both; }
.fr {float: right;}
.fl {float:left;}

/* ------------- clearfix -------------------- */
.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}
/* ========= ページの先頭へ ======== */
.pagetop2 {
	position:fixed;
	right:15px;
	bottom:15px;
	opacity:.5;
	padding:10px;
	color:#fff;
	display:block;
	text-decoration:none;
	text-align:center;
	font-size:13px;
	font-weight:bold;
	z-index:999;
	transition:all 300ms;
	-webkit-transition:all 300ms
}
.pagetop2:hover {
	color:#eee;
	opacity:1
}
.pagetop2.hidden {
	display:none;
	opacity:0
}
a.pagetop2 {
	text-decoration:none!important
}
/* ---------------------------------------------------------------------------------------------------------- */
.headtitle_bg{
	background-color: #161E27;
	_background-color: #546485;
	_background-color: #1abc9c;
	border-radius: 6px;
	height: 38px;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 0px 0 #0e8c73;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	margin:20px 0 10px 0;
	width:100%;
}
.headtitle{
	font-size:16px;
	font-weight:none;
	font-family: 'Áイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	color: #FFFFFF;
	/*line-height: 28px;*/
	padding: 10px 0 0 26px;
	border:0px solid #FF0000;
}

.rec_headtitle_bg{
	_background-color: #1ABC9C;
	background-color: #7E9DB9;
	border-radius: 6px;
	height: 38px;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 0px 0 #0e8c73;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	margin:20px 0 10px 0;
	width:100%;
}
.rec_headtitle{
	font-size:16px;
	font-weight:none;
	font-family: 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	color: #FFFFFF;
	/*line-height: 28px;*/
	padding: 10px 0 0 26px;
	border:0px solid #FF0000;
}

.sub_title{ font-size:18px; font-weight:bold; border-bottom:1px dotted #546485; padding:10px; margin:0 10px 20px 10px; color:#546485;}
/* ======================================================================================================================================== */
/* ======================================================================================================================================== */

/* ================= 番組情報＆ジャンル ================= */
.pubheadtitle_box {
	background: #161e27;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding: 8px 20px;
	color: #ffffff;
	font-size: 18px;
	line-height: 22px;
	font-weight: none;
	letter-spacing: 0.1em;
	margin-bottom: 10px;
}
.pubsubtitle_box {
	background: #161e27;
	padding: 4px 20px;
	color: #ffffff;
	line-height: 18px;
	font-weight: none;
	letter-spacing: 0.1em;
	margin-bottom: 18px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.pubgenre {
	color: #ffffff;
	font-size: 12px;
	font-weight: none;
	float: right;
}
/* ================= 表示マーク ================= */
.mrk_box {
	width: 12px;
	background: #9ac1fa;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #ffffff;
	font-weight: none;
	letter-spacing: 0.01em;
	text-align: center;
	float: left;
	margin: 5px 5px 5px 0px;
	/* padding: 5px 9px 3px 8px; line-height: 20px; */
	padding: 5px 5px 3px 5px; font-size: 12px; line-height: 14px;
}
.mrk_box2 {
	width: 22px;
	background: #1d69a4;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #ffffff;
	font-weight: none;
	letter-spacing: 0.01em;
	text-align: center;
	float: left;
	margin: 5px 5px 5px 0px;
	/* padding: 5px 3px 3px 4px; line-height: 20px; */
	padding: 5px 0px 3px 1px; font-size: 12px; line-height: 14px;
}
.mrk_box3 {
	width: 25px;
	background: #1d69a4;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #ffffff;
	font-weight: none;
	letter-spacing: 0.01em;
	text-align: center;
	float: left;
	margin: 5px 5px 5px 0px;
	/* padding: 5px 3px 3px 4px; line-height: 20px; */
	padding: 5px 0px 3px 1px; font-size: 12px; line-height: 14px;
}
.mrk_box.small { padding: 5px 5px 3px 5px; font-size: 12px; line-height: 14px;}
.mrk_box2.small { padding: 5px 0px 3px 1px; font-size: 12px; line-height: 14px;}

.mrk_box.nikakoku { background: #1d69a4;}
.mrk_box3.fukikae { background: #1d69a4;}
.mrk_box3.jimaku { background: #1d69a4;}
.mrk_box.onseitajyuu { background: #ff9200;}
.mrk_box.moji { background: #000000;}
.mrk_box.kaisetsu { background: #000000;}
.mrk_box2.m51 { background: #9ac1fa;}
.mrk_box.dejitaru { background: #7dba19;}
.mrk_box2.m3d { background: #b212a1;}

/* ================= 新着＆お知らせ ================= */
.mrk_new {
	height: 14px;
	background: #1AAB8A;
	display: inline-block;
	margin: 5px 5px 5px 0;
	color: #ffffff;
	font-size: 12px;
	font-weight: bold;
	line-height: 12px;
	font-style: oblique;
	text-decoration: none;
	padding: 5px 5px 0 5px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.mrk_new.large {
	height: 24px;
	padding: 11px 10px 0 10px;
	font-size: 14px;
	line-height: 14px;
	float:left;
}
.pub_programtitle {
	color: #000000;
	font-size: 21px;
	line-height: 1.3;
	font-weight: bold;
	letter-spacing: -0.01em;
	text-align: left;
	margin: 15px 0px 10px;
}

.mrk_info {
	width: 50px;
	background: #ff4137;
	color: #ffffff;
	font-size: 12px;
	line-height: 18px;
	font-weight: bold;
	letter-spacing: 0.02em;
	text-decoration: none;
	padding: 3px 8px 0px 8px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	text-align: center;
	margin: 5px;
	float: left;
}
.mrk_info_selected_txt {
	width: 150px;
	color: #ff4137;
	font-size: 12px;
	line-height: 22px;
	font-weight: bold;
	letter-spacing: 0.02em;
	text-decoration: none;
	padding: 0px 8px 0px 0px;
	text-align: left;
	margin: 5px;
	float: left;
}
.mrk_info_txt {
	width: 90%;
	color: #ff4137;
	line-height: 20px;
	font-weight: none;
	margin: 0 5px 25px 20px;
	padding:5px;
	float: left;
}
/* ================= 区切り線 BORDER LINE ================= */
.listHr { margin: 3px 0 5px 0; width: 100%; height: 1px; background: #999999; }
hr.blkline {border-top:1px solid #cecece;}
hr.dashedline {
    border-top: 2px dashed #c7c7c7;
    clear: both;
    margin-bottom: 10px;
    margin-top: 10px;
}
/* ================= 共通 リストボタン ================= */
a.button {
	height: 20px;
	display: inline-block;
	margin: 0 5px 10px 5px;
	color: #ffffff;
	font-size: 12px;
	line-height: 12px;
	font-weight: bold;
	text-decoration: none;
	padding: 8px 12px 0 12px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.08);
	-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.08);
	box-shadow:0 1px 1px rgba(0, 0, 0, 0.08);
}
a.button.large { padding: 10px 12px 0 11px; font-size: 14px; line-height: 14px;}
a:hover.button { background-position: 0 -28px;}
a:hover.button.large { background-position: 0 -35px;}

a.button.programore { background:#000000; margin:5px 5px 0 0px; }
a.button.large.programore {}
a:hover.button.programore { opacity:0.8;}

a.button.officialHP { background:#ffb70e; margin:5px 0 0 0px;}
a.button.large.officialHP {}
a:hover.button.officialHP { opacity:0.8;}

/* ================= パブページ ================= */
/* ================= SNS Buttons Styles ================= */
a.button.twitter { background: url(../img/icons/sns_color_twitter.png) #2cb3c7; margin:10px 0 5px 5px; padding: 8px 13px 0 15px;}
a:hover.button.twitter { opacity:0.8;}

a.button.facebook { background: url(../img/icons/sns_color_facebook.png) #1d69a3; margin:10px 0 5px 5px; padding: 8px 13px 0 15px;}
a:hover.button.facebook { opacity:0.8;}

/* ================= PUButtons Link Styles ================= */
.BLink{ float:left; padding-right:5px;}
a.PUBbutton {
	height: 25px;
	width: 38%;
	min-width:180px;
	display: inline-block;
	margin: 0 5px 15px 5px;
	color: #ffffff;
	text-align:center;
	background:#2a353c;
	font-size: 16px;
	line-height: 16px;
	font-weight: bold;
	text-decoration: none;
	letter-spacing: 0.02em;
	padding: 11px 25px 0 25px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.08);
	-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.08);
	box-shadow:0 1px 1px rgba(0, 0, 0, 0.08);
}
a.PUBbutton.large { padding: 11px 15px 0 15px; font-size: 14px; line-height: 14px;}
a:hover.PUBbutton { background-position: 0 -28px;}
a:hover.PUBbutton.large { background-position: 0 -35px;}

a.PUBbutton.officialHP { background:#ffb70e;}
a.PUBbutton.large.officialHP {}
a:hover.PUBbutton.officialHP { opacity:0.8;}

a.PUBbutton.present { background:#FF0000; /* background:#009e96; */}
a.PUBbutton.large.present {}
a:hover.PUBbutton.present { opacity:0.8;}

a.PUBbutton.inquiry { background:#009e96;}
a.PUBbutton.large.inquiry {}
a:hover.PUBbutton.inquiry { opacity:0.8;}

a.PUBbutton.spectator { background:#009e96;}
a.PUBbutton.large.spectator {}
a:hover.PUBbutton.spectator { opacity:0.8;}

a.PUBbutton.OUTofficialHP { background:#ffb70e;}
a.PUBbutton.large.OUTofficialHP {}
a:hover.PUBbutton.OUTofficialHP { opacity:0.8;}

a.PUBbutton.event { background:#0db361;}
a.PUBbutton.large.event {}
a:hover.PUBbutton.event { opacity:0.8;}

a.PUBbutton.dvd { background:#0db361;}
a.PUBbutton.large.dvd {}
a:hover.PUBbutton.dvd { opacity:0.8;}

a.PUBbutton.campaign { background:#0db361;}
a.PUBbutton.large.campaign {}
a:hover.PUBbutton.campaign { opacity:0.8;}

.PUBbutton.txt { font-size:11px; color:#999999; margin:-10px 0 0 10px; }

/* ================= Buttons Styles ================= */
.styleR {
  -moz-transition: background 0.15s linear, border-radius 0.25s ease-out, letter-spacing ease-in, color 0.2s;
  -o-transition: background 0.15s linear, border-radius 0.25s ease-out, letter-spacing ease-in, color 0.2s;
  -webkit-transition: background 0.15s linear, border-radius 0.25s ease-out, letter-spacing ease-in, color 0.2s;
  transition: background 0.15s linear, border-radius 0.25s ease-out, letter-spacing ease-in, color 0.2s;
}
.styleR:hover, .styleR:active {
  border-radius: 34px;
  background: transparent;
}
.styleC {
  position: relative;
  z-index: 1;
}
.styleC:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  height: 0;
  width: 0;
  border-radius: 50%;
  background: #1a1a1a;
  z-index: -1;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -moz-transition: width 0.3s, height 0.2s ease-in-out, border-radius 0.1s linear 0.05s;
  -o-transition: width 0.3s, height 0.2s ease-in-out, border-radius 0.1s linear 0.05s;
  -webkit-transition: width 0.3s, height 0.2s ease-in-out, border-radius 0.1s linear;
  -webkit-transition-delay: 0s, 0s, 0.05s;
  transition: width 0.3s, height 0.2s ease-in-out, border-radius 0.1s linear 0.05s;
}
.styleC:hover:before {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
