@charset "UTF-8";
/*--------------------------------------------------------------------
/- admin	:TV TOKYO Communications Corporation.
/- update :20170406
/--------------------------------------------------------------------*/
/*
　基本フォントサイズは13px（下記を参考に%で指定する）
　10px→77%　 11px→85%　 12px→93%　 13px→100%　14px→108%
　15px→116%　16px→124%　17px→131%　18px→139%　19px→147%
　20px→154%　21px→162%　22px→169%　23px→177%　24px→185%
　25px→192%　26px→200%
*/
/**********************************************************************
	印刷禁止
**********************************************************************/
@media print { body { display: none !important; } }
/**********************************************************************
	テキスト
**********************************************************************/
.wrapper .center { text-align: center; }
.wrapper .left { text-align: left; }
.wrapper .right { text-align: right; }
.wrapper .hidetext { text-indent: -9999px; font-size: 1px; overflow: hidden; }
.wrapper .none { display: none; }
.wrapper .large { font-size: 116%; *font-size: 15px; }
.wrapper .small { font-size: 85%; *font-size: 11px; }
.wrapper .x-small { font-size: 77%; *font-size: 10px; }
.wrapper .thin { font-weight: normal; }
.wrapper .attenntion { text-indent: -1em; margin-left: 1em; }
.wrapper .red { color: #D00003; }
.wrapper .mincho { font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif; }
.wrapper .italic { font-style: italic; }

/**********************************************************************
	リンクカラー
**********************************************************************/
.wrapper a { color: inherit; text-decoration: none; }
.wrapper a:hover { text-decoration: underline; }
.wrapper a img { transition: all .5s; }
.wrapper a img:hover { opacity: 0.6; }

/********************************************************************** フロート
**********************************************************************/
.wrapper .float_l { float: left; }
.wrapper .float_r { float: right; }
.wrapper .clearfix:after { content: "."; display: block; height: 0.1px; clear: both; visibility: hidden; }
.wrapper .clearfix { zoom: 1; }
.wrapper .clear { clear: both; }

/********************************************************************** 共通スタイル
**********************************************************************/
.wrapper .w100 { width: 100%; }
.wrapper .w50 { width: 50%; }
.wrapper .w40 { width: 40%; }
.wrapper .w30 { width: 30%; }
.wrapper .radius5 { border-radius: 5px; }
.wrapper .radius50 { border-radius: 5px 5px 0 0; }
.wrapper .br { display: block; }
.wrapper .nobr { display: inline; }
@media screen and (min-width: 769px) { .wrapper .smp_only { display: none; } }
@media screen and (max-width: 768px) { .wrapper .pc_only { display: none; } }
.wrapper .oa_alert { color: #ee0000; font-weight: bold; line-height: 1.4; position: relative; background: #fff; font-size: 108%; padding: 10px calc((100vw - 980px)/2); }
@media screen and (max-width: 768px) { .wrapper .oa_alert { padding: 10px 15px 10px 15px; } }
.wrapper .oa_alert:before { content: "！"; background: #ee0000; color: #fff; font-weight: bold; font-size: 12px; border-radius: 100px; width: 18px; height: 18px; display: inline-block; text-align: center; line-height: 18px; margin-right: 8px; vertical-align: 2px; }

/**********************************************************************
	基本のボタン・矢印
**********************************************************************/
.wrapper a.common_link_button, .wrapper .common_link_button a { display: block; width: 68%; text-align: center; padding: 20px 10px; border-radius: 5px; margin: 20px auto 0 auto; font-size: 124%; text-decoration: none; color: #FFF; position: relative; line-height: 1.1em; background-color: #0f8d46; transition: all 0.3s; -webkit-transition: all 0.3s; }
.wrapper a.common_link_button:after, .wrapper .common_link_button a:after { content: ""; position: absolute; right: 25px; top: 50%; margin-top: -13px; display: block; width: 15px; height: 15px; border-top: 2px solid #0f8d46; border-right: 2px solid #0f8d46; -webkit-transform: rotate(45deg); transform: rotate(45deg); overflow: hidden; margin-top: -6px; right: 21px; border-color: #FFF; border-width: 2px; width: 10px; height: 10px; }
.wrapper a.common_link_button:hover, .wrapper .common_link_button a:hover { opacity: 0.8; }
@media screen and (max-width: 768px) { .wrapper a.common_link_button, .wrapper .common_link_button a { width: 100%; box-sizing: border-box; padding: 10px; line-height: 1.5; font-size: 116%; } }

/**********************************************************************
	基本の見出し
**********************************************************************/
.wrapper .tmpl_title_bar { background: #0f8d46; color: #fff; font-weight: bold; padding: 8px 8px 8px 10px; }
@media screen and (min-width: 769px) { .wrapper .tmpl_title_bar { font-size: 185%; }
  .wrapper .tmpl_title_bar:before { content: ""; display: inline-block; width: 10px; height: 10px; border: solid 6px #fff; vertical-align: middle; margin-right: 10px; margin-top: -3px; border-radius: 50%; } }
@media screen and (max-width: 768px) { .wrapper .tmpl_title_bar { font-size: 124%; }
  .wrapper .tmpl_title_bar:before { content: ""; display: inline-block; width: 6px; height: 6px; border: solid 6px #fff; vertical-align: middle; margin-right: 6px; margin-top: -3px; border-radius: 50%; } }

/**********************************************************************
ソーシャルボタン
**********************************************************************/
/*SNSアイコンフォント*/
@font-face { font-family: 'fontello'; src: url("/fonts/template_sns_icon.woff") format("woff"), url("/fonts/template_sns_icon.ttf") format("truetype"); font-weight: normal; font-style: normal; }
.wrapper .sns_link a { text-decoration: none; }
.wrapper .sns_link a:before { font-family: "fontello"; text-decoration: none; color: #fff; line-height: 50px; font-size: 192%; text-align: center; display: block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
.wrapper .sns_link a[href*="twitter"] { background: #1DA1F2; }
.wrapper .sns_link a[href*="instagram"] { background: #E4405F; background: -webkit-linear-gradient(135deg, #f13f79 30%, #786ad5 100%); background: linear-gradient(135deg, #f13f79 30%, #786ad5 100%); }
.wrapper .sns_link a[href*="instagram"]:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(15deg, #ffdb2c, #f9764c 25%, rgba(255, 77, 64, 0) 50%) no-repeat; background: linear-gradient(15deg, #ffdb2c, #f9764c 25%, rgba(255, 77, 64, 0) 50%) no-repeat; z-index: -10; }
.wrapper .sns_link a[href*="line"] { background: #00C300; }
.wrapper .sns_link a[href*="facebook"] { background: #3B5998; }
.wrapper .sns_link a[href*="twitter"]:before { content: '\e800'; }
.wrapper .sns_link a[href*="instagram"]:before { content: '\e804'; }
.wrapper .sns_link a[href*="line"]:before { content: '\e805'; }
.wrapper .sns_link a[href*="facebook"]:before { content: '\e80f'; }

.wrapper .sns_block #tx_social_bar { display: block; margin-top: 10px; }
.wrapper .sns_block #tx_social_bar a.Twitter, .wrapper .sns_block #tx_social_bar a.Facebook, .wrapper .sns_block #tx_social_bar a.Google, .wrapper .sns_block #tx_social_bar a.Atode, .wrapper .sns_block #tx_social_bar a.Hatena, .wrapper .sns_block #tx_social_bar a.Line { display: inline-block; transition: all 0.3s; -webkit-transition: all 0.3s; border-radius: 100px; margin: 0 5px 0 0; font-size: 16px; width: 30px; height: 30px; line-height: 30px; padding: 5px; position: relative; }
.wrapper .sns_block #tx_social_bar a.Twitter:before, .wrapper .sns_block #tx_social_bar a.Facebook:before, .wrapper .sns_block #tx_social_bar a.Google:before, .wrapper .sns_block #tx_social_bar a.Atode:before, .wrapper .sns_block #tx_social_bar a.Hatena:before, .wrapper .sns_block #tx_social_bar a.Line:before { position: absolute; width: 30px; height: 30px; line-height: 30px; text-align: center; display: block; margin: 0; top: 0; left: 0; }

/**********************************************************************
外枠の設定
**********************************************************************/
.wrapper { margin: 0 auto; color: #333; font-size: 13px; font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #F5F5F5; }
.wrapper .wrap_inner { width: 980px; margin: 0 auto; }
@media screen and (max-width: 768px) { .wrapper .wrap_inner { width: 100%; } }
.wrapper #content_left { float: left; margin: 20px 0 100px 0; width: 660px; }
@media screen and (max-width: 768px) { .wrapper #content_left { width: 100%; margin: 0; } }
.wrapper #content_right { float: right; margin: 20px 0 100px 0; width: 300px; }
@media screen and (max-width: 768px) { .wrapper #content_right { width: 100%; } }
.wrapper .clearfix:after { content: ""; display: block; clear: both; }

/**********************************************************************
	header
**********************************************************************/
.wrapper #bangumi_header { position: relative; background: #fff; border-bottom: solid 1px #eee; }
@media screen and (max-width: 768px) { .wrapper #bangumi_header { background-color: transparent; } }
.wrapper #bangumi_header:before { position: absolute; z-index: 1; top: 0; content: ""; display: block; height: 40px; width: 100%; background: #0f8d46; }
@media screen and (max-width: 768px) { .wrapper #bangumi_header:before { box-sizing: border-box; border: 3px solid #FFF; height: 30px; border-radius: 0; } }
.wrapper #bangumi_header .bangumi_header_in { width: 980px; height: 150px; margin: 0 auto; position: relative; }
@media screen and (max-width: 768px) { .wrapper #bangumi_header .bangumi_header_in { width: 100%; height: auto; } }
.wrapper #bangumi_header .logo { position: absolute; top: 15px; left: 0; z-index: 2; border: solid 5px #fff; background: #fff; }
@media screen and (min-width: 769px) { .wrapper #bangumi_header .logo { box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); } }
@media screen and (max-width: 768px) { .wrapper #bangumi_header .logo { position: static; text-align: center; } }
.wrapper #bangumi_header .logo a { width: 320px; height: 130px; /*width: 280px;*/ /*height: 114px;*/ display: block; }
@media screen and (min-width: 769px) { .wrapper #bangumi_header .logo a { background-image: url("/tokyomachi/images/logo.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; } }
@media screen and (max-width: 768px) { .wrapper #bangumi_header .logo a { background-image: url("/tokyomachi/images/logo_smp.jpg"); background-position: center center; background-size: cover; width: 100%; height: 0; padding-bottom: 37.4%; } }
.wrapper #bangumi_header .nav_onair { position: absolute; z-index: 2; top: 5px; left: 380px; /* left: 343px; */ color: #fff; font-size: 124%; font-weight: bold; letter-spacing: 1px; text-align: center; }
@media screen and (max-width: 768px) { .wrapper #bangumi_header .nav_onair { position: relative; left: 0; top: 2px; font-size: 96%; } }
.wrapper #bangumi_header .nav_onair span.num { font-size: 131%; margin: 0 4px; }
.wrapper #bangumi_header .nav_social { position: absolute; z-index: 2; top: 10px; right: 10px; }
@media screen and (max-width: 768px) { .wrapper #bangumi_header .nav_social { display: none; } }

/**********************************************************************
	navigation
**********************************************************************/
.wrapper #bangumi_header .g_nav { position: absolute; bottom: 0; right: 0; overflow: hidden; }
@media screen and (max-width: 768px) { .wrapper #bangumi_header .g_nav { position: static; background-color: transparent; margin-top: 10px; border-bottom: 10px solid #FFF; content: ""; display: block; clear: both; } }
.wrapper #bangumi_header .g_nav li { float: left; width: 300px; text-align: center; margin: 0 0 0 30px; }
@media screen and (max-width: 768px) { .wrapper #bangumi_header .g_nav li { width: 50%; margin: 0; } }
.wrapper #bangumi_header .g_nav li:last-child { letter-spacing: -2px; }
.wrapper #bangumi_header .g_nav li a { display: block; position: relative; color: #666; font-weight: bold; font-size: 200%; text-decoration: none; padding: 40px	20px	30px	20px; }
@media screen and (min-width: 769px) { .wrapper #bangumi_header .g_nav li a:after { content: ""; display: block; position: absolute; height: 5px; bottom: 0; background: #0f8d46; z-index: 5; transition: all 0.1s; -webkit-transition: all 0.1s; width: 0%; left: 50%; } }
@media screen and (max-width: 768px) { .wrapper #bangumi_header .g_nav li a { font-size: 131%; padding: 15px 0; border-bottom: 1px solid #ddd; border-top: 5px solid transparent; } }
#top .wrapper #bangumi_header .g_nav li a#nav_top { color: #333; }
@media screen and (max-width: 768px) { #top .wrapper #bangumi_header .g_nav li a#nav_top { background-color: #FFF; border-top: solid 5px #0f8d46; border-bottom: 1px solid #FFF; border-right: 1px solid #ddd; } }
@media screen and (min-width: 769px) { #top .wrapper #bangumi_header .g_nav li a#nav_top:after { content: ""; display: block; position: absolute; height: 5px; bottom: 0; background: #0f8d46; z-index: 5; transition: all 0.1s; -webkit-transition: all 0.1s; width: 100%; left: 0%; } }
#backnumber .wrapper #bangumi_header .g_nav li a#nav_backnumber { color: #333; }
@media screen and (max-width: 768px) { #backnumber .wrapper #bangumi_header .g_nav li a#nav_backnumber { background-color: #FFF; border-top: solid 5px #0f8d46; border-bottom: 1px solid #FFF; border-left: 1px solid #ddd; } }
@media screen and (min-width: 769px) { #backnumber .wrapper #bangumi_header .g_nav li a#nav_backnumber:after { content: ""; display: block; position: absolute; height: 5px; bottom: 0; background: #0f8d46; z-index: 5; transition: all 0.1s; -webkit-transition: all 0.1s; width: 100%; left: 0%; } }
.wrapper #bangumi_header .g_nav li span { display: block; position: relative; color: #CCC; font-weight: bold; font-size: 200%; padding: 40px	20px	30px	20px; }
@media screen and (max-width: 768px) { .wrapper #bangumi_header .g_nav li span { font-size: 131%; padding: 15px 0; } }
.wrapper #bangumi_header .g_nav li:hover a { color: #333; }
@media screen and (min-width: 769px) { .wrapper #bangumi_header .g_nav li:hover a:after { content: ""; display: block; position: absolute; height: 5px; bottom: 0; background: #0f8d46; z-index: 5; transition: all 0.1s; -webkit-transition: all 0.1s; width: 100%; left: 0%; } }
.wrapper #bangumi_header .g_nav li.disabled { opacity: 0.3; pointer-events: none; }

/**********************************************************************
	mainvisual
**********************************************************************/
.wrapper .mainvisual { position: relative; }
.wrapper .movie_wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.wrapper .movie_wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.wrapper .bc_wrap { position: relative; width: 100%; padding-top: 56.25%; }
.wrapper .bc_wrap .bc_inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/**********************************************************************
	bangumi_box
**********************************************************************/
.wrapper .bangumi_box { background: #fff; padding: 25px; border: solid 1px #eee; margin: 0 0 30px 0; }
@media screen and (max-width: 768px) { .wrapper .bangumi_box { padding: 15px 15px 25px 15px; } }
.wrapper .bangumi_box p { margin: 0 0 0.5em 0; font-size: 131%; }
@media screen and (max-width: 768px) { .wrapper .bangumi_box p { font-size: 108%; } }
.wrapper .bangumi_box a.btn { width: 95%; margin: 0 auto 30px auto; }
.wrapper .bangumi_box .oa_alert { color: #ee0000; display: inline; font-weight: bold; line-height: 1.4; font-size: 108%; padding: 0; margin-bottom: 20px; }
.wrapper .bangumi_box .oa_alert:before { content: none; }
#backnumber .wrapper .bangumi_box .oa_alert { display: none; }
.wrapper .bangumi_box .common_subtitle_first { background: #0f8d46; font-size: 147%; line-height: 1.3em; padding: 10px; color: #fff; font-weight: bold; }
@media screen and (max-width: 768px) { .wrapper .bangumi_box .common_subtitle_first { font-size: 116%; padding: 5px; } }
.wrapper .bangumi_box .common_subtitle_second { border-bottom: solid 2px #0f8d46; padding-bottom: 5px; font-size: 147%; font-weight: bold; line-height: 1.3em; }
.wrapper .bangumi_box .common_subtitle_second.border_black { border-color: #222; }
@media screen and (max-width: 768px) { .wrapper .bangumi_box .common_subtitle_second { font-size: 116%; } }
.wrapper .bangumi_box .common_subtitle_third { font-size: 147%; border-left: solid 6px #0f8d46; padding-left: 10px; line-height: 1.3em; font-weight: bold; }
@media screen and (max-width: 768px) { .wrapper .bangumi_box .common_subtitle_third { font-size: 116%; padding-left: 5px; } }
@media screen and (max-width: 768px) { .wrapper .bangumi_box .common_subtitle_first , .wrapper .bangumi_box .common_subtitle_second , .wrapper .bangumi_box .common_subtitle_third { font-size: 116%; } }
.wrapper h2.bangumi_head { color: #111; overflow: hidden; }
.wrapper h2.bangumi_head .bangumi_date { display: block; font-size: 124%; color: #444; margin: 0 0 5px 0; padding-top: 3px; }
.wrapper h2.bangumi_head .bangumi_tit { display: block; font-size: 170%; font-weight: bold; margin: 0 0 20px 0; }
@media screen and (max-width: 768px) { .wrapper h2.bangumi_head .bangumi_date { font-size: 108%; }
  .wrapper h2.bangumi_head .bangumi_tit { font-size: 139%; margin-bottom: 10px; } }

/**********************************************************************
	トップページ
**********************************************************************/
@media screen and (min-width: 769px) { #top .wrapper h2.bangumi_head:before { display: block; float: left; content: "次回予告"; background: #0f8d46; color: #fff; font-size: 154%; text-align: center; padding: 10px; width: 2.5em; line-height: 1.3; margin: 0 15px 20px 0; } }
@media screen and (max-width: 768px) { #top .wrapper h2.bangumi_head:before { display: inline-block; content: "次回予告"; background: #0f8d46; color: #fff; border-radius: 2px; font-size: 96%; text-align: center; padding: 8px 15px; line-height: 1.3; margin: 0; } }

/**********************************************************************
	概要
**********************************************************************/
.wrapper .about { background: #FFF url("/tokyomachi/images/bg_about.jpg") left bottom no-repeat; /*min-height: 330px;*/ padding: 30px; border: solid 1px #ddd; border-top: none; background-size: cover; }
@media screen and (max-width: 768px) { .wrapper .about { /*min-height: 250px;*/ padding: 15px; } }
.wrapper .about_bg_bottom_padding { padding-bottom: 350px; }
@media screen and (max-width: 768px) { .wrapper .about_bg_bottom_padding { padding-bottom: 300px; } }
.wrapper .about_txt { font-size: 120%; font-weight: bold; line-height: 1.8; text-shadow: 0 0 4px #fff,1px -1px 6px #fff,-2px -2px 8px #fff; }
@media screen and (max-width: 768px) { .wrapper .about_txt { font-size: 108%; line-height: 1.9; } }
.wrapper .about_txt.cast img { float: right; width: 40%; box-sizing: border-box; margin: 10px 0 10px 10px; }
@media screen and (max-width: 768px) { .wrapper .about_txt.cast img { display: block; margin: 0 auto; width: 60%; margin: 0 auto 20px auto; float: none; } }
.wrapper #nameN { width: 100%; font-size: 120%; font-weight: bold; padding-top: 10px; text-align: center; }

/**********************************************************************
	バックナンバーサムネイル
**********************************************************************/
.wrapper .bn_title { color: #888; font-size: 185%; margin: 0 0 20px 0; }
.wrapper .bn_list { display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; }
#top .wrapper .bn_list { padding-top: 10px; }
.wrapper .bn_list li { display: none; width: 32%; background: #fff; border: solid 1px #ddd; cursor: pointer; margin: 0 10px 20px 0; overflow: hidden; }
#top .wrapper .bn_list li { display: block; }
.wrapper .bn_list li:nth-child(3n) { margin-right: 0; }
.wrapper .bn_list li:hover img { -webkit-transform: scale(1.2); transform: scale(1.2); }
.wrapper .bn_list li .bn_img { position: relative; width: 100%; height: 120px; overflow: hidden; }
.wrapper .bn_list li .bn_img img { width: 100%; transition: all 0.3s; transform-origin: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.wrapper .bn_list li.movie .bn_img:after { background: url("/tokyomachi/images/icon_movie.png") no-repeat; content: ""; background-size: contain; position: absolute; left: calc(50% - 25px); bottom: calc(50% - 17.5px); width: 50px; height: 35px; }
.wrapper .bn_list li.youtube .bn_img:after { background: url("/tokyomachi/images/icon_youtube.png") no-repeat; content: ""; background-size: contain; position: absolute; left: calc(50% - 25px); bottom: calc(50% - 17.5px); width: 50px; height: 35px; }
.wrapper .bn_list .bn_txt_box { padding: 10px 10px 15px 10px; line-height: 1.4; }
.wrapper .bn_list .bn_txt_box .bn_date { color: #888; }
@media screen and (min-width: 769px) { .wrapper .bn_list .bn_txt_box .bn_date { margin: 0 0 5px 0; } }
.wrapper .bn_list .bn_txt_box .bn_txt { color: #333; font-size: 116%; font-weight: bold; }
.wrapper .bn_list .bn_txt_box .bn_txt .guest { /* font-size: 90%; */ /*  font-weight: normal; */ display: block; }
@media screen and (min-width: 769px) { .wrapper .bn_list .bn_txt_box .bn_txt .guest { margin-top: 3px; } }
.wrapper .bn_list .bn_txt_box .bn_txt a, .wrapper .bn_list .bn_txt_box .bn_txt a:hover { color: #333; text-decoration: none; }

@media screen and (max-width: 768px) { .wrapper .bn_title { padding-left: 10px; margin-bottom: 10px; }
  #top .wrapper .bn_list { padding-top: 0; }
  .wrapper .bn_list li { width: 100%; margin: 0; border: none; border-bottom: solid 1px #ddd; }
  .wrapper .bn_list li .bn_img { float: left; height: auto; padding: 10px; width: 40%; }
  .wrapper .bn_list li.movie .bn_img:after { content: ""; background-size: contain; position: absolute; left: calc(50% - 20px); top: calc(50% - 14px); width: 40px; height: 28px; }
  .wrapper .bn_list li.youtube .bn_img:after { content: ""; background-size: contain; position: absolute; left: calc(50% - 20px); top: calc(50% - 14px); width: 40px; height: 28px; } }
/**********************************************************************
	ページ送り
**********************************************************************/
.wrapper .pager { width: 640px; margin: 20px 0 30px 0; overflow: hidden; }
@media screen and (max-width: 768px) { .wrapper .pager { width: 100%; } }
.wrapper .pager .pagenation { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; position: relative; }
.wrapper .pager .pagenation li { margin: 0 2px; }
.wrapper .pager .pagenation li .btn_first { position: absolute; top: 0; left: 0; }
.wrapper .pager .pagenation li .btn_first span { display: none; }
.wrapper .pager .pagenation li .btn_last { position: absolute; top: 0; right: 0; }
.wrapper .pager .pagenation li .btn_last span { display: none; }
.wrapper .pager .pagenation li a, .wrapper .pager .pagenation li span { display: block; padding: 0.6em 0; font-size: 15px; width: 2.8em; text-decoration: none; background: #fff; border-radius: 3px; border: solid 1px #ddd; color: #999; text-align: center; }
.wrapper .pager .pagenation li a:hover { color: #fff; background: #ccc; border: solid 1px #ccc; }
.wrapper .pager .pagenation li.here a { color: #fff; background: #333; border: solid 1px #333; }
#top .wrapper .pager { display: none; }
.wrapper .pageNum { display: none; }

/**********************************************************************
	トップへ戻るボタン
**********************************************************************/
.wrapper #bangumi_page_top { position: fixed; bottom: 20px; right: 20px; z-index: 5; display: block; background: #0f8d46; text-decoration: none; width: 55px; height: 55px; text-align: center; border-radius: 4px; -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5); text-indent: -999px; overflow: hidden; transition: all 0.3s; -webkit-transition: all 0.3s; }
.wrapper #bangumi_page_top:before { content: ""; display: block; position: absolute; top: 23px; right: 50%; height: 10px; margin-right: -5px; width: 10px; border: 2px solid #fff; border-left-width: 0; border-bottom-width: 0; transform: rotate(-45deg); }
.wrapper #bangumi_page_top:hover { opacity: 0.9; }
.wrapper #bangumi_page_top.hide { bottom: -80px; }
@media screen and (max-width: 768px) { .wrapper #bangumi_page_top { width: 10vw; height: 10vw; }
  .wrapper #bangumi_page_top:before { top: 4vw; right: 3.4vw; height: 3vw; margin-right: 0; width: 3vw; box-sizing: border-box; } }

/**********************************************************************
	フッター広告を非表示
**********************************************************************/
.txcms_footerSitemapBanner { display: none !important; }

/********************************************************************** 右カラム
**********************************************************************/
.wrapper .sns_box { position: relative; text-align: center; overflow: hidden; transition: all 0.3s; -webkit-transition: all 0.3s; }
.wrapper .sns_box:after { content: ""; position: absolute; width: 100%; height: 100%; background: #fff; /*background: url('/'+ $bangumiDir +'/images/img_sns.jpg');
background-position:  center center;
background-repeat: no-repeat;
background-size: cover;*/ top: 0; left: 0; }
.wrapper .sns_box .sns_bg { padding: 15px 15px 30px 15px; position: relative; z-index: 2; /*background: rgba(0, 0, 0, 0.20);*/ }
.wrapper .sns_box h1 { color: #333; font-size: 16px; padding-bottom: 20px; /*text-shadow: 0 0 3px rgba(0,0,0,0.5);*/ }
.wrapper .sns_box ul.sns_link { display: table; table-layout: fixed; width: 100%; }
.wrapper .sns_box ul.sns_link li { display: table-cell; text-align: center; }
.wrapper .sns_box a { position: relative; width: 80%; min-width: 50px; height: 50px; display: block; z-index: 2; background: #fff; border-radius: 100px; overflow: hidden; margin: 0 auto; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); }
@media screen and (min-width: 769px) { .wrapper .video_service { background: #fff; }
  .wrapper .video_service h1 { font-size: 139%; line-height: 1em; padding: 15px 10px 15px 10px; color: #222; border-top: solid 4px #0f8d46; }
  .wrapper .video_service .common_title_second { color: #fff; padding: 20px; }
  .wrapper .video_service li { padding: 10px; border-top: solid 1px #efefef; cursor: pointer; }
  .wrapper .video_service li img { display: block; width: 50%; float: left; margin: 0 10px 0 0; border-radius: 3px; }
  .wrapper .video_service li a { transition: all 0.3s; -webkit-transition: all 0.3s; display: block; text-decoration: none; color: #222; line-height: 1.5em; font-size: 93%; }
  .wrapper .video_service li:after { content: ""; display: block; clear: both; }
  .wrapper .video_service li.other { text-decoration: underline; text-align: right; }
  .wrapper .video_service li:hover { opacity: 0.9; }
  .wrapper .video_service li.large img { width: 100%; float: none; border-radius: 3px 3px 0 0; } }
@media screen and (max-width: 768px) { .wrapper .video_service h1 { font-size: 124%; line-height: 1em; padding: 15px 10px 15px 10px; text-align: center; background: #0f8d46; color: #FFF; }
  .wrapper .video_service .banner { padding: 10px 0; }
  .wrapper .video_service .banner li.other { position: relative; }
  .wrapper .video_service .banner li.other a { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 40px; font-size: 93%; font-weight: bold; color: #222; } }

/**********************************************************************
	コンテンツ横スクロール表示
**********************************************************************/
@media screen and (max-width: 768px) { .wrapper .scrollbox { display: block; }
  .wrapper .scrollbox ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: nowrap; flex-wrap: no-wrap; width: 100%; overflow: scroll; -webkit-overflow-scrolling: touch; }
  .wrapper .scrollbox li { min-width: 55%; width: 100%; margin: 0 2% 0 0; border-radius: 4px; background: #fff; vertical-align: top; border: solid 1px #ccc; }
  .wrapper .scrollbox li:first-child { margin-left: 2%; }
  .wrapper .scrollbox li a { text-decoration: none; color: #666; font-size: 93%; line-height: 1.2; }
  .wrapper .scrollbox li a img { display: block; border-radius: 4px 4px 0 0; width: 100%; }
  .wrapper .scrollbox li a span { text-align: left; display: block; }
  .wrapper .scrollbox li a span.txt { text-align: left; display: block; white-space: normal; padding: 10px; } }

/**********************************************************************
　インスタヴィジェット
**********************************************************************/
.wrapper .insta_widget { height: 560px; }
@media screen and (max-width: 768px) { .wrapper .insta_widget { height: 85vw; } }

/**********************************************************************
　マージン・パディング
**********************************************************************/
.wrapper .p10 { padding: 10px !important; }
.wrapper .p20 { padding: 20px !important; }
.wrapper .p30 { padding: 30px !important; }
.wrapper .pb5 { padding-bottom: 5px !important; }
.wrapper .pb10 { padding-bottom: 10px !important; }
.wrapper .pb15 { padding-bottom: 15px !important; }
.wrapper .pb20 { padding-bottom: 20px !important; }
.wrapper .pb25 { padding-bottom: 25px !important; }
.wrapper .pb30 { padding-bottom: 30px !important; }
.wrapper .mb5 { margin-bottom: 5px !important; }
.wrapper .mb10 { margin-bottom: 10px !important; }
.wrapper .mb15 { margin-bottom: 15px !important; }
.wrapper .mb20 { margin-bottom: 20px !important; }
.wrapper .mb25 { margin-bottom: 25px !important; }
.wrapper .mb30 { margin-bottom: 30px !important; }
.wrapper .mb40 { margin-bottom: 40px !important; }
.wrapper .mt5 { margin-top: 5px !important; }
.wrapper .mt10 { margin-top: 10px !important; }
.wrapper .mt15 { margin-top: 15px !important; }
.wrapper .mt20 { margin-top: 20px !important; }
.wrapper .mt25 { margin-top: 25px !important; }
.wrapper .mt30 { margin-top: 30px !important; }
.wrapper .mt40 { margin-top: 40px !important; }
.wrapper .mt50 { margin-top: 50px !important; }
.wrapper .mt80 { margin-top: 80px !important; }
.wrapper .pt10 { padding-top: 10px !important; }
.wrapper .pt20 { padding-top: 20px !important; }
