#story #contents{padding:2em 0 1.5em;}
@media all and (max-width: 991px) { 
#story #contents{padding:5% 0 3%;}
}
#story h1#ttl:not(span) {letter-spacing:-.1em !important;}
#story h1#ttl span {letter-spacing:0 !important;}

#story h2{font-size:200%; text-align:center; margin:0 auto; position: relative; line-height: 1.4; font-weight:700; color:#414ca2;}
#story h2 span.epnum{
font-family: headline-gothic-atf-rough-n2, sans-serif;
font-weight: 400;
font-style: normal;
 font-size:220%;
 color:#676b86;
 letter-spacing:.025em;
}
#story h2 .slash{height:30px; z-index:1; display:inline-block; vertical-align: middle; padding:0 .1em 0 0;}

#story #contents .inner{position: relative; z-index:1;}
#story #contents .inner p a{ color:#dc814a; font-weight: 500;}
#story #contents .inner p a.link2{ color:#de3f42; font-weight: 500; text-decoration: underline;}

#story #contents div.mov-outer{width:90%; margin:0 auto; z-index:1; position: relative;}

#story #bknm{
position: relative;
z-index:11;
width:100%; margin:3em auto 0; padding:2em 0 1.5em;
background-color:rgba(200,197,199,0.2);
}
#story #bknm h3{
font-size:390%;
padding:0 0 0 2%; margin:0 0 1%; 
color:#414ca2;
font-family: longhand-lp, sans-serif;
font-weight: 700;
font-style: normal;
position: absolute;
top:-.5em; left:0;
}
#story #bknm h3 span{
  transform: rotate(-4deg);
  display:inline-block;
  position: relative;
}

#story #bknm ul{
margin:0 auto;
display: flex; flex-flow: row wrap;
width:92.5%;
}
#story #bknm li{
margin:1% 0 0 1.5%;
position:relative;
width: -webkit-calc(100% / 4 - 1.5%) ;
width: calc(100% / 4 - 1.5%);
aspect-ratio: 3 / 2;
}
#story #bknm li a{display:block; width:100%; height:100%; text-align:center; position:relative; background-size: cover; background-repeat: no-repeat; background-position: center center; transition:.5s;
border:1px solid rgba(65,76,162,0.65);
box-shadow:3px 3px 0 rgba(65,76,162,0.8);
}
#story #bknm li a:hover{opacity:0.7;}
#story #bknm li img{position:absolute; top:0; left:0; width:100%; height:100%;}
#story #bknm li a span.enum {font-size:135%; padding:3.5% 2% 1%;
position: absolute; bottom:-3px; right:-3px; z-index:1; 
color:#e9ecf1;
letter-spacing:.05em; 
line-height:100%; 
background-color:rgba(65,76,162,0.9);
font-family: headline-gothic-atf-rough-n2, sans-serif;
font-weight: 400;
font-style: normal;
}
#story #bknm li span.nmb{font-size:180%;
letter-spacing:.05em;}

#story ul#show{width:92%; margin:1.5em auto 0; display:flex; flex-flow: row wrap; align-items: center;}
#story ul#show li span {background-size: cover; background-repeat: no-repeat; background-position: center top; width:100%; height:0; padding:66.5% 0 0;}
#story ul#show li span.lazy {position:relative; display:block;}
#story figure.ph_1{width:80%; margin:1.5em auto 1em;}

#story #contents .ep4,#story #bknm li.bk4 a{background-image:url(./img/ep4/ep4.jpg);}
#story #contents .ep3,#story #bknm li.bk3 a{background-image:url(./img/ep3/ep3.jpg);}
#story #contents .ep2,#story #bknm li.bk2 a{background-image:url(./img/ep2/ep2.jpg);}
#story #contents .ep1,#story #bknm li.bk1 a{background-image:url(./img/ep1/ep1.jpg);}

.square::before {
    content: "";
    bottom: 0;
    right: 0;
background: linear-gradient(120deg, rgba(157,0,130,1) 46%,rgba(86,26,134,1) 66%);
    position: absolute;
    z-index:0;
}
.triangle::before {
    content: "";
    bottom: 0;
    right: 0;
    border-top:4em solid transparent;
    border-right:4em solid rgba(255,255,255,.8);
    position: absolute;
    z-index:0;
}
.ep_chart{
width:75%;
margin:1em auto 2em;
}
.lbg-pics{background-color:none !important; box-shadow:none !important;}

@media all and (min-width: 768px) {
#story ul#show{justify-content: center;}
#story ul#show li{width:750px; height:auto;}
#story ul#show li:nth-child(2){margin:0 20px;}
#story ul#show.ver4 li {width:48%; height:auto;}
#story ul#show.ver4 li{margin:0 .8% 1.5% .8%;}
}

@media all and (max-width: 767px) {
#story #contents .inner p {padding:1em 4% .5em;}
#story h2{font-size:4.8vw; width:100%;}
#story #bknm{margin:10% auto 0; padding:4% 0 2.5%;}
#story #bknm h3{font-size:10vw;}
#story #bknm ul{margin:1.5% auto 0; width:94%;}
#story #bknm li{margin:1.5% 1.5% .5% 1.5%;
width: -webkit-calc(100% / 2 - 4%) ;
width: calc(100% / 2 - 4%);
}
#story #bknm li a span.enum{
font-size:4.25vw;
}

#story ul#show{width:90%; margin:3% auto 2%;}
#story ul#show li {/*margin:1.5%;
width:45%;
width: -webkit-calc(100% / 2 - 3%) ;
width: calc(100% / 2 - 3%);*/
width:100%;
margin:0 0 2.5%;
}
#story ul#show li:last-child{margin:0 !important;}
#story figure.ph_1{width:92%; margin:4% auto;}

.triangle::before {
    border-top:11vw solid transparent;
    border-right:11vw solid rgba(255,255,255,.8);
}
.ep_chart{
width:90%;
margin:2.5% auto 5%;
}

.episode1 nav.yt-playlist-btn ul li:last-of-type {
	width:65%;
}
}

/*lazyload*/
.lazyload, .lazyloading { opacity: 0;}
.lazyloaded { opacity: 1; transition: all 1000ms;}

.nocontxt { user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-drag:none; -khtml-user-drag: none; -webkit-touch-callout: none; text-align:center;}
.nocontxt img { pointer-events: none;}
.prgimg100 { max-width: 100%;}