/*	lower h1
============================== */
.story h1 {
   background-image: url(../img/story_h1.jpg);
}
.story .vol { background-image: url(../img/flower_count.png);}
.story .vol2 { background-image: url(../img/flower_count2.png);}
.story .vol3 { background-image: url(../img/flower_count3.png);}
.story .vol4 { background-image: url(../img/flower_count4.png);}
.story .vol5 { background-image: url(../img/flower_count5.png);}
.story .vol6 { background-image: url(../img/flower_count6.png);}
.story .vol7 { background-image: url(../img/flower_count7.png);}
.story .vol8 { background-image: url(../img/flower_count8.png);}
.story .vol9 { background-image: url(../img/flower_count9.png);}
.story .vol10 { background-image: url(../img/flower_count10.png);}
.story .vol11 { background-image: url(../img/flower_count11.png);}

@media all and (min-width: 768px) {
   .story_header {
      height: 445px;
   }
   .story .story_header {
      position: relative;
   }
   .story .oa_date {
      position: absolute;
      left: 535px;
      padding-top: 10px;
      top: 340px;
   }
   .story .oa_date .big {
      font-size: 35px;
      line-height: 27px;
   }
   .story .oa_date .big span{
      font-size: 15px;
      line-height:  11px;
      display: block;
      margin-top:  20px;
   }
   .story .volume {
      width: 94px;
      height: 95px;
      position: absolute;
      left: 530px;
      top: 240px;
      white-space: nowrap;
      text-indent: 110%;
      overflow: hidden;
      margin-bottom:  10px;
   }

   .story h1 {
      background-repeat: no-repeat;
      white-space: nowrap; text-indent: 110%; overflow: hidden;
      width: 956px;
      height: 207px;
   }
   .story p.lines {
      width: 800px;
      margin: 0 auto 10px;
      font-size: 15px;
   }
   div.player-deco {
      position: absolute;
      left: 20px;
      top: 140px;;
      border:5px solid #fff;
      margin-bottom:30px;
      width: 480px;
      margin: 0 auto 30px;
      box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
      background-repeat: no-repeat;
   }
   div.player-deco2 {
      border:10px solid #fff;
      margin-bottom:30px;
      width: 400px;
      float: left;
      box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
   }
   div.player-deco2:first-child {
      float: left;
   }
   div.player-deco2:last-child {
      float: right;
   }

}
/*	lower h1 (00px ÷ 782) */
@media all and (max-width: 767px) {
   .story h1 {
		background-position: left 13.6495654%;
   }
   .story p.lines {
      margin-bottom: 10px;
   }
   div.player-deco,
   div.player-deco2 {
      border:6px solid #fff;
      margin-bottom:15px;
      box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
   }
   .volume {
      background-size: contain;
      background-repeat: no-repeat;
      white-space: nowrap;
      text-indent: 110%;
      overflow: hidden;
      font-size: 30px;
      width: 45px;
      height: 45px;
      display: inline-block;
      float:  left;
      margin: 0 7px 10px 0px;
   }

   .story_header .big {
      display: inline;
      font-size: 17px;
      margin-top:  12px;
      line-height: 35px;
   }
   .story_header .big span {
      display: inline;
      font-size:  12px;
   }
   .story_header .oa_date {
      padding-top: 7px;
   }
}
/* .story */

.story .twitter-share-button {
   margin-bottom: 20px;
}



@media all and (min-width: 768px) {
   figure.cmn-pic-main {
      width: 385px;
      margin: 0 18px;
      display: inline-block;
      /* text-align: center; */
   }
   figure.story01_01 p span, figure.story01_01 p span img,
   figure.story02_01 p span, figure.story02_01 p span img,
   figure.story03_01 p span, figure.story03_01 p span img,
   figure.story04_01 p span, figure.story04_01 p span img,
   figure.story05_01 p span, figure.story05_01 p span img,
   figure.story06_01 p span, figure.story06_01 p span img,
   figure.story07_01 p span, figure.story07_01 p span img,
   figure.story08_01 p span, figure.story08_01 p span img,
   figure.story09_01 p span, figure.story09_01 p span img,
   figure.story10_01 p span, figure.story10_01 p span img,
   figure.story11_01 p span, figure.story11_01 p span img {width: 385px;height:256px;}}
@media all and (max-width: 767px) {
   figure.story01_01 p span,
   figure.story02_01 p span,
   figure.story03_01 p span,
   figure.story04_01 p span,
   figure.story05_01 p span,
   figure.story06_01 p span,
   figure.story07_01 p span,
   figure.story08_01 p span,
   figure.story09_01 p span,
   figure.story10_01 p span,
   figure.story11_01 p span { padding-top:66.5789473684211%; }}











   /* bknm_mov*/
   .bknm_mov{
       display:-webkit-box;
       display:-moz-box;
       display:-ms-flexbox;
       display:-webkit-flex;
       display:-moz-flex;
       display:flex;
       -webkit-box-pack:justify;
       -moz-box-pack:justify;
       -webkit-flex-pack:justify;
       -moz-flex-pack:justify;
       -ms-flex-pack:justify;
       -webkit-justify-content:center;
       -moz-justify-content:center;
       justify-content:center;
       -webkit-box-lines:multiple;
       -moz-box-lines:multiple;
       -webkit-flex-wrap:wrap;
       -moz-flex-wrap:wrap;
       -ms-flex-wrap:wrap;
       flex-wrap:wrap;
   }
   .bknm_mov li a{
     position: relative;
     display: inline-block;
     background-color: #451782;
     border: 2px solid #451782;
     color: #fff;
     text-decoration: none;
     transition: all .3s;
   }

   .bknm_mov li a:hover {
     background-color: #fff;
     color: #10447c;
   }

   .bknm_mov li a:hover::after {
     border-left-color: #10447c;
   }


   @media all and (min-width: 768px) {

   div.teaser {
      position: absolute;
      bottom: 0;
   }

   .bknm_mov{width: 550px;margin:0 auto 15px;position:  absolute;bottom:  0;}
   .bknm_mov li {font-size:100%;margin:5px;}
   .bknm_mov li a{padding: .4em 2em;}
   .bknm_mov li a::after {
     position: absolute;
     top: 50%;
     right: .2em;
     content: '';
     margin-top: -5px;
     border: 7px solid transparent;
     border-top-width: 5px;
     border-bottom-width: 5px;
     border-left-color: #fff;
     transition: all .3s;
   }

   }
   @media all and (max-width: 767px) {

   .bknm_mov{/* width:100%; */margin:0 auto 1em;}
   .bknm_mov li {font-size:70%;margin:.2em .2em;}
   .bknm_mov li a{ padding: .2em 2em .2em .5em;}
   .bknm_mov li a::after {
     position: absolute;
     top: 50%;
     right: 0;
     content: '';
     margin-top: -5px;
     border: 7px solid transparent;
     border-top-width: 5px;
     border-bottom-width: 5px;
     border-left-color: #fff;
     transition: all .3s;
   }
   }


   @media all and (max-width: 320px) {
   .bknm_mov li {font-size:70%;margin:.2em .2em;}
   .bknm_mov li a{ padding: .1em 2em .1em .5em;}
   }



   /*	youtube close image
   ============================== */
      body.story_01 div.player-deco { background-image: url(../img/story01_main.jpg);}
      body.story_02 div.player-deco { background-image: url(../img/story02_main.jpg);}
      body.story_03 div.player-deco { background-image: url(../img/story03_main.jpg);}
      body.story_04 div.player-deco { background-image: url(../img/story04_main.jpg);}
      body.story_05 div.player-deco { background-image: url(../img/story05_main.jpg);}
      body.story_06 div.player-deco { background-image: url(../img/story06_main.jpg);}
      body.story_07 div.player-deco { background-image: url(../img/story07_main.jpg);}
      body.story_08 div.player-deco { background-image: url(../img/story08_main.jpg);}
      body.story_09 div.player-deco { background-image: url(../img/story09_main.jpg);}
      body.story_10 div.player-deco { background-image: url(../img/story10_main.jpg);}
      body.story_11 div.player-deco { background-image: url(../img/story11_main.jpg);}
   @media all and (max-width: 767px) {
      div.player-deco {
         box-sizing: content-box;
         outline: 5px solid #fff;
         position: relative;
         height: 0;
         background-repeat: no-repeat;
         background-size: cover;
         padding-top: 56.25%;
         margin-bottom: 10px;
      }
      div.player-deco div.player-outer {
         position: absolute;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
      }
   }