@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 { .noprint { 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 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: #25bca5; 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 #25bca5; border-right: 2px solid #25bca5; -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 .common-title { background: #25bca5; color: #fff; font-weight: bold; padding: 8px 8px 8px 10px; }
@media screen and (min-width: 769px) { .wrapper .common-title { font-size: 185%; } }
@media screen and (max-width: 768px) { .wrapper .common-title { font-size: 124%; } }

/**********************************************************************
ソーシャルボタン
**********************************************************************/
/*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 .socialbtn { text-align: center; }
@media screen and (max-width: 768px) { .wrapper .socialbtn .tx_social_table { margin: 0 auto; } }

/**********************************************************************
外枠の設定
**********************************************************************/
.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: #222; }
.wrapper .wrapper_inner { width: 980px; margin: 0 auto; }
@media screen and (max-width: 768px) { .wrapper .wrapper_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; }

/**********************************************************************
	navigation
**********************************************************************/
/**********************************************************************
	トップへ戻るボタン
**********************************************************************/
.wrapper #bangumi_page_top { position: fixed; bottom: 20px; right: 20px; z-index: 5; display: block; background: #555; 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; 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 #25bca5; }
  .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: #25bca5; 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; } }

/**********************************************************************
　add.css
**********************************************************************/
.wrapper { color: #fff; /* 画像の読み込み対策 ---------*/ /* メインヘッダーのslicに追記 ---------*/ /* /メインヘッダーのslicに追記 ---------*/ /* ナビゲーション ---------*/ /* /ナビゲーション ---------*/ /* 見出し ---------*/ /* /見出し ---------*/ /* 作品一覧 ---------*/ /* /作品一覧 ---------*/ /* 動画スライダー ---------*/ /* /動画スライダー ---------*/ /* /youtube ---------*/ /* /youtube ---------*/ }
.wrapper h1.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; /* 古いブラウザ用 */ clip: rect(0, 0, 0, 0); /* 現代のブラウザ用 */ clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrapper .img-card { aspect-ratio: 300 / 424; width: 100%; height: auto; display: block; object-fit: cover; }
.wrapper .main-header { /*矢印*/ /*矢印の背景*/ /* スライダーが初期化前は非表示 */ /* スライダーが初期化（読み込み）されたら表示 */ }
.wrapper .main-header .slick-prev:hover, .wrapper .main-header .slick-prev:focus, .wrapper .main-header .slick-next:hover, .wrapper .main-header .slick-next:focus { background-color: #000; }
.wrapper .main-header .slick-prev:hover, .wrapper .main-header .slick-next:hover { opacity: 0.6; }
.wrapper .main-header .slick-prev:before { content: ''; color: #fff; opacity: 1; width: 20px; height: 20px; border: 0; border-top: solid 1px #fff; border-left: solid 1px #fff; transform: rotate(-45deg); position: absolute; top: 0; left: 5px; bottom: 0; margin: auto; }
.wrapper .main-header .slick-next:before { content: ''; color: #fff; opacity: 1; width: 20px; height: 20px; border: 0; border-top: solid 1px #fff; border-left: solid 1px #fff; transform: rotate(135deg); position: absolute; top: 0; right: 5px; bottom: 0; margin: auto; }
.wrapper .main-header .slick-prev { left: 0; z-index: 1; width: auto; height: auto; padding: 20px 10px; color: #fff; background-color: #000; transition: .4s; }
.wrapper .main-header .slick-next { right: 0; width: auto; height: auto; padding: 20px 10px; background-color: #000; transition: .4s; }
.wrapper .main-header .slider { display: none; }
.wrapper .main-header .slider.slick-initialized { display: block; }
.wrapper .nav-list { text-align: center; margin-top: 40px; border: 1px solid #48555a; border-radius: 100px; padding: 10px; background: #000; }
@media screen and (max-width: 768px) { .wrapper .nav-list { padding: 10px 0; margin: 20px 5px 0 5px; } }
.wrapper .nav-item { position: relative; list-style: none; display: inline-block; margin: 0 12px; }
.wrapper .nav-item::after { content: ""; display: block; position: absolute; height: 2px; bottom: 0; background: #25bca5; z-index: 5; transition: all 0.1s; -webkit-transition: all 0.1s; width: 0%; left: 50%; }
.wrapper .nav-item:hover::after, .wrapper .nav-item.is-active::after { content: ""; display: block; position: absolute; height: 2px; bottom: 0; background: #25bca5; z-index: 5; transition: all 0.1s; -webkit-transition: all 0.1s; width: 100%; left: 0%; }
.wrapper .nav-item a { text-decoration: none; color: #fff; font-size: 18px; display: block; padding: 5px 0; font-weight: bold; }
.wrapper .nav-item a:hover { text-decoration: none; }
@media screen and (max-width: 768px) { .wrapper .nav-item a { font-size: 15px; } }
.wrapper .movie_ganre_sub_title_wrap .movie_ganre_sub_title { display: flex; justify-content: center; align-items: center; font-size: 20px; text-align: center; color: #fff; background: url(../../images/title_bg.png) left 5%, linear-gradient(to left, #8401fd 0%, #16c0a1 100%); margin: 40px 0 20px 0; border-radius: 8px 0px 8px 0px; padding: 4px 0; text-shadow: 0 0 4px rgba(0, 0, 0, 0.9); letter-spacing: 4px; }
@media screen and (max-width: 768px) { .wrapper .movie_ganre_sub_title_wrap .movie_ganre_sub_title { margin: 40px 10px 20px 10px; font-size: 18px; background: linear-gradient(to left, #8401fd 0%, #16c0a1 100%); } }
.wrapper .cinema-list { display: flex; flex-wrap: wrap; gap: 40px 15px; box-sizing: border-box; }
@media screen and (max-width: 768px) { .wrapper .cinema-list { margin: 10px; } }
.wrapper .cinema-list .cinema-item { width: calc((100% - 30px) / 3); box-sizing: border-box; text-align: center; }
@media screen and (max-width: 768px) { .wrapper .cinema-list .cinema-item { width: calc((100% - 15px) / 2); } }
.wrapper .cinema-list .cinema-item a { text-decoration: none; display: block; transition: all 0.3s; -webkit-transition: all 0.3s; }
.wrapper .cinema-list .cinema-item a .cinema-thumb { display: block; overflow: hidden; }
.wrapper .cinema-list .cinema-item a:hover img { opacity: 1; transform: scale(1.1); /* 拡大 */ }
.wrapper .cinema-list .cinema-text { font-size: 15px; font-weight: bold; padding: 0.5rem; display: block; text-align: center; }
@media screen and (max-width: 768px) { .wrapper .cinema-list .cinema-text { font-size: 14px; } }
.wrapper #movie_genre_ytb { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.wrapper #movie_genre_ytb iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.wrapper #movie_genre_ytb_thumb .scrollable { /* required settings */ position: relative; overflow: hidden; width: calc(100% - 120px); min-height: 80px; float: left; margin-left: 2px; margin-right: 2px; margin-top: 3px; }
.wrapper #movie_genre_ytb_thumb .scrollable .items { /* this cannot be too large */ width: max-content; position: absolute; }
.wrapper #movie_genre_ytb_thumb .scrollable .items a { display: inline-block; width: 24%; height: auto; background-image: url(../../images/back_ytb_tumb_bg.gif); background-repeat: no-repeat; position: relative; float: left; margin-right: 5px; overflow: hidden; }
@media screen and (max-width: 768px) { .wrapper #movie_genre_ytb_thumb .scrollable .items a { width: 48%; } }
.wrapper #movie_genre_ytb_thumb .scrollable .items a img { display: block; margin-top: -9px; }
.wrapper #movie_genre_ytb_thumb .items div { float: left; padding-top: 0px; }
.wrapper #movie_genre_ytb_thumb .navi_l, .wrapper #movie_genre_ytb_thumb .navi_r { float: left; cursor: pointer; }
.wrapper #movie_genre_ytb_thumb .navi_l { margin-left: 4px; }
@media screen and (max-width: 768px) { .wrapper .movie_slider_wrap { padding: 0 2%; } }
.wrapper .youtube_wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.wrapper .youtube_wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* /.wrapper */
/**********************************************************************
　マージン・パディング
**********************************************************************/
.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 .mb50 { margin-bottom: 50px !important; }
.wrapper .mb80 { margin-bottom: 80px !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; }