@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&display=swap');
.anto {
  font-family: "Antonio", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
#story .wrap h1#ttl{
  background:url(../img/ph_story1.webp) no-repeat center center;
  background-size:cover;
}
.footph {
  background-image:url(../img/ph_story2.webp);
  background-position: center center;
}
@media all and (min-width: 768px) {
#story .wrap h1#ttl{
  background-position:center center;
}
}
@media all and (max-width: 767px) {
#story .wrap h1#ttl{
  background-position:center top;
  background-size:cover;
}
}

#story .inner{
  margin:0 auto 3em;
  background-color:#EAEAEA;
  padding:2em;
  color:#111;
}
#story #contents div.mov-outer{
  width: min(92%, 900px);
  margin:0 auto 2em;
  z-index:1;
  position: relative;
}
#story h2{
  font-size:200%;
  text-align:center;
  margin:0 auto .5em;
  position: relative;
  color:#fff;
}
#story #contents h2 span.oad{
  display:inline-block;
  font-size:180%;
  font-family: "Antonio", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
#story #contents .inner p{
  line-height:160%;
  font-size:100%;
  line-break:strict;
  word-break: break-all;
}
#story #contents .inner p a{
  color:#d71718;
  font-weight:600;
}
#story #contents .ep11,#story #bknm li.bk1 a:after{background-image:url(./img/ep11/ep11.jpg);}
@media print {
#story #bknm li a:after {display:none !important;}
}

#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 #bknm{width:100%; margin:4em auto .5em; background-color:rgba(45,45,45,0.4); padding:1em 0 2%;}
#story #bknm h3{text-align:left; letter-spacing:.05em; font-size:400%; position:relative; margin:-.6em 0 .3em 0; color:#af1918; line-height:100%; padding:0 0 0 4%;
font-family: "anton", sans-serif;
font-weight: 400;
font-style: normal;
}
.sidebdr {
width:100%;
margin:0 auto;
display: flex;
align-items: center;
}
.sidebdr:before,
.sidebdr:after {
border-top: 2px solid;
content: "";
flex-grow: 1;
}
.sidebdr:before {
margin-right:3rem;
}
.sidebdr:after {
margin-left:3rem;
}

#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;}
#story #bknm li a{display:block; width:100%; height:145px; text-align:center; position:relative; overflow: hidden; 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);
}
#story #bknm li span.epn {padding:4.5% 5%; font-size:100%; position: absolute; top:0; left:0; margin:0 auto; z-index:1;}

.triangle::before {
    content: "";
    bottom: 0;
    right: 0;
    border-top:4em solid transparent;
    border-right:4em solid rgba(175,25,24,0.95);
    position: absolute;
    z-index:10;
}
.triangle span.enum{position: absolute; right:3%; bottom:2%;  z-index:11; font-size:250%; color:#fff;
font-family: "proxima-nova-extra-condensed", sans-serif;
font-weight: 600;
font-style: normal;
}
.triangle span.f70 {font-size:60%; line-height:1;}

.lbg-pics{background-color:none !important; box-shadow:none !important;}

a.btn_info{font-size:200%; font-weight:700; display: block; width:38%; text-align:center; margin:1em auto .25em; color:#1b1d1e; background-color:#af1918;
transform: skewX(-18deg);
padding:.8em 0; transition:.5s ease-in-out; box-shadow:14px 12px 12px rgba(0,0,0,0.15);}
a.btn_info span{ display: inline-block; transform: skewX(18deg);}

@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:5vw;
 margin:4vw auto 2vw;
}
#story .inner{
  margin:0 auto 8vw;
  padding:3%;
}

#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 #bknm{margin:8% auto 2%; padding:1em 0 2%;}
#story #bknm h3{font-size:10vw; margin:-.8em 0 .3em 0; padding:0 0 0 3%;}
.sidebdr:before {
margin-right:3%;
}
.sidebdr:after {
margin-left:3%;
}
#story #bknm ul{margin:0 auto; width:98%;}
#story #bknm li{margin:0 1.5% 2% 2.5%; 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(175,25,24,0.95);
}
.triangle span.enum{font-size:7.2vw;}