#story #contents{padding:2em 0 0;}
#story #contents h2{font-size:300%; text-align:center; width:100%; margin:0 auto; position: relative; line-height: 1.4; font-weight:700; color:#00349f;
font-family: "alternate-gothic-extra-cond", sans-serif;
font-weight: 700 !important;
letter-spacing:.05em;
font-style: italic;
}
#story #contents h2 .lastep{
font-family: ryo-gothic-plusn, sans-serif;
font-weight: 600;
font-style: normal;
}
#story #contents h2 .slash{width:30px; padding:0 0 0 .1em;}
#story #trailer {width:800px; height:450px; background-size:cover; background-position: center top; background-repeat: no-repeat; margin:.5em auto 1em; overflow: hidden; z-index: 1;}
#story #trailer iframe {width:100%; height:450px;}
#story #contents .mov-outer{max-width:850px; margin:0 auto; padding:0; position:relative; background:#00349f;}
#story #contents .inner p{line-height:180%;}
#story #contents .inner p a{ color:#00349f; font-weight: 500;}
#story #contents .inner p a.link2{ color:#007c85; font-weight: 500; text-decoration: underline;}

@media all and (max-width: 991px) { 
#story #contents .mov-outer{width:92%;}
#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 #bknm{width:100%; margin:2em auto 2em; position: relative; padding:1em 0 2em;
background-image:linear-gradient(to left, rgba(135,176,241,0.4) 40%,rgba(135,176,241,0) 100%); 
background-repeat:no-repeat;
background-size:100% 90%;
background-position:right bottom;}
#story #bknm h3{letter-spacing:.05em; font-size:350%; position:relative; padding:0 0 0 5.5%; margin:0 0 1%; color:#0072ff;
font-family: "alternate-gothic-extra-cond", sans-serif;
font-weight: 700 !important;
letter-spacing:.05em;
font-style: italic;
}
#story #bknm ul{margin:0 auto; display: flex; flex-flow: row wrap; width:92.5%;}
#story #bknm li{margin:1% .5% 1% 2%; position:relative; height:auto;
width: -webkit-calc(100% / 4 - 3%) ;
width: calc(100% / 4 - 3%);
border:2px solid #00349f;
box-shadow:4px 4px #00349f;
box-sizing: border-box;
background-color:#00349f;
}
#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;
box-shadow:6px 6px 8px rgba(60,90,149,0.25);
height:0; padding:66% 0 0;
}
#story #bknm li a:hover{opacity:0.70;}
#story #bknm li img{position:absolute; top:0; left:0; width:100%; height:100%;}
#story #bknm li span.enum {font-size:170%; padding:2.5% 2.5% 1%; position: absolute; bottom:0; right:0; z-index:1; color:#fff100; letter-spacing:0; line-height:100%; 
font-weight:400;
background: linear-gradient(140deg, #0359da 10%,#00349f 100%);
font-family: "alternate-gothic-extra-cond", sans-serif;
font-weight: 600;
font-style: italic;
}
#story #bknm li span.nmb{font-size:140%;
letter-spacing:.05em;}

#story ul#show{width:91%; margin:1em 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 .ep10,#story #bknm li.bk10 a{background-image:url(./img/ep10/ep10_28.jpg);}
#story #contents .ep9,#story #bknm li.bk9 a{background-image:url(./img/ep9/ep9_6.jpg);}
#story #contents .ep8,#story #bknm li.bk8 a{background-image:url(./img/ep8/ep8_27.jpg);}
#story #contents .ep7,#story #bknm li.bk7 a{background-image:url(./img/ep7/ep7_16.jpg);}
#story #contents .ep6,#story #bknm li.bk6 a{background-image:url(./img/ep6/ep6_13.jpg);}
#story #contents .ep5,#story #bknm li.bk5 a{background-image:url(./img/ep5/ep5_28.jpg);}
#story #contents .ep4,#story #bknm li.bk4 a{background-image:url(./img/ep4/ep4_7.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_22.jpg);}
#story #contents .ep1,#story #bknm li.bk1 a{background-image:url(./img/ep1/thumb.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;
}

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

@media all and (max-width: 767px) {
#story #contents{padding:3% 0;}
#story #contents h2{font-size:7vw; width:100%;}
#story #contents h2 .slash{width:4%; height:auto;}
#story #bknm{margin:6% auto 0; padding:2.5% 0 4%;
background-image:linear-gradient(to left, rgba(135,176,241,0.4) 60%,rgba(135,176,241,0) 100%);
background-size:100% 94%; 
}
#story #bknm h3{font-size:9vw;}
#story #bknm ul{margin:1.5% auto 0; width:94%;}
#story #bknm li{margin:1.5% 2% 3% 2.5%; height:auto;
width: -webkit-calc(100% / 2 - 5%) ;
width: calc(100% / 2 - 5%);}
#story #bknm li a{height:0;}
#story #bknm li span.enum{font-size: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;}

.triangle::before {
    border-top:11vw solid transparent;
    border-right:11vw solid rgba(255,255,255,.8);
}
}

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