#story h2{font-size:250%; text-align:center; width:100%; margin:0 auto; position: relative; line-height: 1.4; font-weight: 500;}
#story h2 span{
font-weight: 600;
font-family: "bc-alphapipe", sans-serif;
font-style: italic;
}
#story #trailer {width:800px; height:450px; background-size:cover; background-position: center top; background-repeat: no-repeat; margin:.5em auto 1em; border-radius:14px; overflow: hidden; z-index: 1;}
#story #trailer iframe {width:100%; height:450px;}
#story #contents .inner p{line-height:180%;}
#story #contents .inner p a{ color:#f77c99; font-weight: 500;}

#story #bknm{width:100%; margin:2em auto .5em; position: relative;}
#story #bknm h3{letter-spacing:.05em; font-size:360%; position:relative; padding:0 0 0 4%; margin:0 0 .5em;
font-weight: 600;
font-family: "bc-alphapipe", sans-serif;
font-style: italic;
letter-spacing:.05em;
}
#story #bknm h3::first-letter{color:#f77c99;}
#story #bknm ul{margin:.6em auto 0; display: flex; flex-flow: row wrap; width:95%;}
#story #bknm li{margin:.5em 0 .8em 1.5em; position:relative; width:205px; height:137px; border-radius:14px;}
#story #bknm li a::before { 
  content:'';
  width:100%;
  height:100%;
  position: absolute;
  top:-3%;
  left:-3%;
  z-index:1;
  border:1px dotted #000;
  border-radius:14px;
  transition:.3s;
}

#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; border-radius:14px; transition:.5s; background-color:rgba(255,255,255,0.7);}
#story #bknm li a:hover{opacity:0.70;}
#story #bknm li span.enum {padding:2% 4% 0 0; font-size:200%; position: absolute; top:-20px; left:2%; z-index:1; color:#000; letter-spacing:-.1em;/* background-color:rgba(250,89,146,0.8);*/line-height:100%; text-shadow: 2px 2px #fff;}
#story #bknm li span.nmb{font-size:140%;
font-family: "bc-alphapipe", sans-serif;
font-weight: 600;
font-style: normal;
letter-spacing:.05em;}

#story ul#show{width:100%; margin:2em auto 1em; 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 .ep10,#story #bknm li.bk10 a{background-image:url(./img/ep10/ep10.jpg);}
#story #contents .ep9,#story #bknm li.bk9 a{background-image:url(./img/ep9/ep9.jpg?1);}
#story #contents .ep8,#story #bknm li.bk8 a{background-image:url(./img/ep8/ep8.jpg?1);}
#story #contents .ep7,#story #bknm li.bk7 a{background-image:url(./img/ep7/ep7.jpg?1);}
#story #contents .ep6,#story #bknm li.bk6 a{background-image:url(./img/ep6/ep6.jpg?1);}
#story #contents .ep5,#story #bknm li.bk5 a{background-image:url(./img/ep5/ep5.jpg?1);}
#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);}

.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:280px; 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 1% 2% 1%;}
}

@media all and (max-width: 767px) {
#story h2{font-size:5.4vw; width:100%;}
#story #trailer {width:92%; position: relative; padding:51.75% 0 0; height: 0; overflow: hidden; height:auto; margin:0 auto .5em;}
#story #trailer iframe{ position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;}

#story #bknm{margin:6% auto 0;}
#story #bknm h3{font-size:10vw; margin:0 0 4%;}

#story #bknm ul{margin:1.5% auto 0; width:95%;}
#story #bknm li{margin:2% 1.5% 2% 3%; height:auto; border-radius:3vw;
width: -webkit-calc(100% / 2 - 5%) ;
width: calc(100% / 2 - 5%);}
#story #bknm li a{height:0; padding:60% 0 0; border-radius:3vw;}
#story #bknm li a::before { border-radius:3vw;}
#story #bknm li img{position:absolute; top:0; left:0; width:100%; height:100%;}
#story #bknm li span.enum{font-size:6vw; top:-3.5vw;}

#story ul#show{width:90%; margin:4% auto;}
#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 4%;
}
#story ul#show li:last-child{margin:0 !important;}
#story figure.ph_1{width:92%; margin:4% auto;}
}


/*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%;}