#story h2{font-size:250%; font-weight: 600; text-align:center; padding:0; margin:0 auto .6em; position: relative; color:#8d1524; line-height:100%;}
#story h2 span{
font-family: "brandon-grotesque", sans-serif;
font-weight: 700;
font-style: normal;
}
#story h2 span.f160:first-of-type{padding:0 .05em;}
#story h2 span.subttl{font-size:70%; color:#8d1524; line-height:100%; display:inline-block; position: relative;
font-family: vdl-v7gothic, sans-serif;
font-weight: 700;
font-style: normal;
}
#story h2 span.subttl:before,#story h2 span.subttl:after{
  content: '';
  position: absolute;
  bottom:18%;
  width:35px;
  height:15px;
  background-size:contain;
background: url(../img/ornament.svg) no-repeat left center; 
}
#story h2 span.subttl:before{
  left:-1.5em;
  background-position: right center;
}
#story h2 span.subttl:after{
  right:-1.5em;
}

#story #trailer {width:800px; height:450px; background-size:cover; background-position: center center; background-repeat: no-repeat; margin:.5em auto 1em; overflow: hidden; z-index: 1;}
#story #trailer iframe {width:100%; height:450px;}
#story #contents .inner p{line-height:180%; word-break: break-all;}
#story #contents .inner p a{color:#8d1524; font-weight:600;}
@media print {
#story #bknm li a:after {display:none !important;}
}

#story ul#show{width:100%; margin:1.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:after{background-image:url(./img/ep10/ep10_4.jpg);}
#story #contents .ep9,#story #bknm li.bk9 a:after{background-image:url(./img/ep9/ep9_4.jpg);}
#story #contents .ep8,#story #bknm li.bk8 a:after{background-image:url(./img/ep8/ep8_3.jpg);}
#story #contents .ep7,#story #bknm li.bk7 a:after{background-image:url(./img/ep7/ep7_6.jpg);}
#story #contents .ep6,#story #bknm li.bk6 a:after{background-image:url(./img/ep6/ep6.jpg);}
#story #contents .ep5,#story #bknm li.bk5 a:after{background-image:url(./img/ep5/ep5_2.jpg);}
#story #contents .ep4,#story #bknm li.bk4 a:after{background-image:url(./img/ep4/ep4.jpg);}
#story #contents .ep3,#story #bknm li.bk3 a:after{background-image:url(./img/ep3/ep3_3.jpg);}
#story #contents .ep2,#story #bknm li.bk2 a:after{background-image:url(./img/ep2/ep2_6.jpg);}
#story #contents .ep1,#story #bknm li.bk1 a:after{background-image:url(./img/ep1/ep1.jpg);}
#story #bknm{width:100%; margin:2em auto .5em;}
#story #bknm h3{letter-spacing:.02em; font-size:350%; position:relative; margin:0 auto .5em; text-align:center; color:#8d1524; line-height:100%; padding:0; width:92%; background: url(../img/bdr.png) repeat-x center bottom;  background-size:auto 75%;
font-family: "brandon-grotesque", sans-serif;
font-weight: 700;
font-style: normal;
}
.sidebdr {
width:30%;
margin:0 auto;
display: flex;
align-items: center;
}
.sidebdr:before,
.sidebdr:after {
border-top: 4px double;
content: "";
flex-grow: 1;
}
.sidebdr:before {
margin-right:.5em;
}
.sidebdr:after {
margin-left:.5em;
}

#story #bknm ul{margin:0 auto; display: flex; flex-flow: row wrap; width:95%;}
#story #bknm li{margin:0 0 1em 1em; position:relative; width:215px; box-shadow:4px 4px 6px rgba(126,100,64,0.6); border-left:4px solid #8d1524;}
#story #bknm li a{display:block; width:100%; height:140px; text-align:center; position:relative; overflow: hidden; background-color:#fff; margin:0 auto 0; background-size: cover; background-repeat: no-repeat; background-position: center center; transition: 0.3s;}
#story #bknm li a:after{
position: absolute;content: "";display: block;width: 100%;height: 100%;top: 0;background-size: cover; background-repeat: no-repeat; background-position: center center;
   -webkit-transition: all .3s ease-out;
   -moz-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   transition: all .3s ease-out;}
#story #bknm li a:hover:after{
   -moz-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   -ms-transform: scale(1.2);
   transform: scale(1.2);
}
.triangle::before {
    content: "";
    bottom: 0;
    right: 0;
    border-top:4em solid transparent;
    border-right:4em solid rgba(141,21,36,1);
    position: absolute;
    z-index:10;
}
.triangle span.enum{position: absolute; right:3%; bottom:3%;  z-index:11; font-size:235%; color:#fff;
font-family: "brandon-grotesque", sans-serif;
font-weight: 600;
font-style: normal;
letter-spacing:.025em;}
.triangle span.f70 {font-size:60%; line-height:1;}

.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.5vw; margin:0 auto 3%; line-height:120%;}
#story h2 span.subttl{font-size:86%;}
#story h2 span.subttl:before,#story h2 span.subttl:after{
  bottom:1.5vw;
  width:6vw;
  height:30%;
}
#story #contents h3{font-size:4vw;}
#story #trailer {width:92%; position: relative; padding:51.75% 0 0; height: 0; overflow: hidden; height:auto; margin:0 auto;}
#story #trailer iframe{ position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important;}
#story #contents .inner{width:90%;}
#story #contents .inner p{padding:.8em 0 .5em;}

#story ul#show{width:95%; margin:3% 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;}

#story #bknm{margin:5% auto 2%;}
#story #bknm h3{font-size:10vw; padding:0; margin:0 auto 3%;}
.sidebdr:before {
margin-right:3%;
}
.sidebdr:after {
margin-left:3%;
}
#story #bknm ul{margin:0 auto; width:95%;}
#story #bknm li{margin:0 1.5% 2% 3%; height:auto;
width: -webkit-calc(100% / 2 - 5%) ;
width: calc(100% / 2 - 5%);}
#story #bknm li a{height:0; padding:65% 0 0;}
#story #bknm li img{position:absolute; top:0; left:0; width:100%; height:100%;}
.triangle::before {
    border-top:11vw solid transparent;
    border-right:11vw solid rgba(141,21,36,1);
}
.triangle span.enum{font-size:6.8vw;}
}

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