#story {
z-index:2;
position:relative;
min-height: 0;
padding: 0 0 120px;
}

#story .bg_layer{
background: url(../../../core_sys/images/main/top/story_bg.png)no-repeat center,
  linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%,rgba(0,0,0,0) 100%);
}

/* エピソードコンテンツテーブル */
#ContentsListUnit02{
overflow:hidden;
width:949px;
}

/* タイトル位置を画像下に */
#ContentsListUnit02 div.title{
font-size: 48px;
font-weight: 900;
text-align: center;
position: absolute;
top: 410px;
left: 0;
right: 0;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

/* 話数表示 */
#ContentsListUnit02 div.title span{
font-size: 28px;
display: inline-block;
margin-right: 28px;
}

/* スライド部分 */
#ContentsListUnit02>table{
-webkit-transform:translate(0,0);
transform:translate(0,0);
-webkit-transition:0.5s;
transition:0.5s;
}

/* 横並べ */
#ContentsListUnit02>table>tbody{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

/* スライド部分幅 */
#ContentsListUnit02>table>tbody>tr{
width: 949px;
float:left;
}

/* スライド部分幅 */
#ContentsListUnit02>table>tbody>tr>td{
width: 949px;
padding: 0 100px;
font-size: 18px;
position: relative;
}

/* introductionボタン */
.story_back_btn{
margin-top: 20px;
font-size:24px;
transition:0.5s;
text-align: center;
}

.story_back_btn:hover{
cursor:pointer;
filter: drop-shadow(0 0 5px #fff);
}

/* エピソード選択ボタンリスト */
.episode_btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 500px;
font-size: 18px;
-ms-flex-pack: distribute;
justify-content: space-around;
margin:0 auto;
}

/* 各ボタン */
.episode_btn li{
width:25%;
text-align:center;
font-size:18px;
margin-bottom:10px;
-webkit-transition:1s;
transition: 1s;
opacity: 0.3;
}

/* 数字 */
.episode_btn li span{
font-size:32px;
padding-left:0.1em;
}

/* 公開話 */
.episode_btn li.episode_true{
opacity: 1;
}

.episode_true:hover{
cursor:pointer;
filter: drop-shadow(0 0 5px #fff);
}

/* カレント */
.episode_current,
.episode_current:hover{
-webkit-filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 2px #fff);
filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 5px #fff) drop-shadow(0 0 2px #fff);
color: #900;
font-weight: bold;
}

/* ストーリースタッフ */
.story__staff{
margin-bottom:1em;
font-size:18px;
text-align: center;
}

/* あらすじ */
.story__desc{
font-size:22px;
text-align: justify;
width: 660px;
margin: auto;
}

/* イントロダクション */
.story__intro{
font-size:22px;
text-align:center;
line-height: 3em;
width: 660px;
margin: 0 auto;
}

/* イントロダクション タイトル非表示 */
#ContentsListUnit02>table>tbody>tr:first-child div.title{
display:none;
}

/* エピソードページネーション */
.episode_pagenation{
position: absolute;
top: 160px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 900px;
left: 0;
right: 0;
margin: auto;
}

.episode_pagenation img:hover{
transition: 0.5s;
}
.episode_pagenation img:hover{
cursor:pointer;
filter: brightness(1.5);
}

/* ページネーション next */
.story_next_btn{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}



/* 場面写スライド プラグイン */
/* ========================================
* FONT-FACE
========================================*/
@font-face {
font-family: 'flexslider-icon';
src: url('../../images/others/font/flexslider-icon.eot');
src: url('../../images/others/font/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('../../images/others/font/flexslider-icon.woff') format('woff'), url('../../images/others/font/flexslider-icon.ttf') format('truetype'), url('../../images/others/font/flexslider-icon.svg#flexslider-icon') format('svg');
font-weight: normal;
font-style: normal;
}
/* ========================================
* RESETS
========================================*/
.flex-container a:hover,
.flex-slider a:hover,
.flex-container a:focus,
.flex-slider a:focus {
outline: none;
}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
.flex-pauseplay span {
text-transform: capitalize;
}
/* ========================================
* BASE STYLES
========================================*/
.flexslider {
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flexslider .slides img {
width: 100%;
display: block;
}
.flexslider .slides:after {
content: "\0020";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .flexslider .slides {
display: block;
}
* html .flexslider .slides {
height: 1%;
}
.no-js .flexslider .slides > li:first-child {
display: block;
}
/* ========================================
* DEFAULT THEME
========================================*/
.flexslider {
width:660px;
margin: 0px auto 130px;
position: relative;
zoom: 1;
height:374px;
}
.flexslider .slides {
zoom: 1;
}
.flexslider .slides img {
height: auto;
}
.flex-viewport {
max-height: 2000px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
min-height:374px;
}
.loading .flex-viewport {
max-height: 300px;
}
.carousel li {
margin-right: 5px;
}
.flex-direction-nav {
*height: 0;
}
.flex-direction-nav a {
line-height:1 !important;
text-decoration: none;
display: block;
width: 20px;
height: 30px;
margin: -15px 0 0;
position: absolute;
top: 50%;
z-index: 10;
overflow: hidden;
opacity: 0;
cursor: pointer;
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
font-family: "flexslider-icon";
font-size: 30px;
display: inline-block;
content: '\f001';
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}
.flex-direction-nav a.flex-next:before {
content: '\f002';
}
.flex-direction-nav .flex-prev {
left: -30px;
}
.flex-direction-nav .flex-next {
right: -30px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 0.7;
left: 10px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 0.7;
right: 10px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
opacity: 1;
}
.flex-direction-nav .flex-disabled {
opacity: 0!important;
filter: alpha(opacity=0);
cursor: default;
}
.flex-pauseplay a {
display: block;
width: 20px;
height: 30px;
position: absolute;
bottom: 5px;
left: 10px;
opacity: 0.8;
z-index: 10;
overflow: hidden;
cursor: pointer;
color: #000;
}
.flex-pauseplay a:before {
font-family: "flexslider-icon";
font-size: 30px;
display: inline-block;
content: '\f004';
overflow: hidden;
}
.flex-pauseplay a:hover {
opacity: 1;
}
.flex-pauseplay a .flex-play:before {
content: '\f003';
}
.flex-control-nav {
width: 100%;
position: absolute;
bottom: -40px;
text-align: center;
}
.flex-control-nav li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-paging li a {
width: 8px;
height: 8px;
display: block;
background: #ccc;
cursor: pointer;
text-indent: -9999px;
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
border-radius: 20px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.flex-control-paging li a:hover {
background: #333;
}
.flex-control-paging li a.flex-active {
background: #fff;
cursor: default;
}
.flex-control-thumbs {
margin: 5px 0 0;
position: static;
overflow: hidden;
}
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0;
}
.flex-control-thumbs img {
width: 100%;
height: auto;
display: block;
opacity: .7;
cursor: pointer;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}