/*gallery*/
#gallery #contents .mainph:before {
  background-image: url(../img/gallery/ep1/ep1_1.jpg);
}

#gallery h2, #story h2 {
  font-weight: bold;
  color: #ee0d1a;
  font-size: 180%;
  margin: -1.5em 0 .5em 3%;
}

#gallery h2 span.num, #story h2 span.num {
  font-size: 200%;
}

#gallery ul#show {
  font-size: 0;
  margin: 0 auto 10px;
  letter-spacing: 0;
}

#gallery ul#show li {
  display: inline-block;
  margin: 5px 0 5px 12px;
}

#gallery ul#show li span {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}

#gallery ul#show li span.lazy {
  position: relative;
  display: block;
}

#gallery ul#show li span a {
  width: 192px;
  height: 133px;
  display: block;
  transition: 0.3s;
  /*background-color:rgba(239,205,227,0.3);*/
}

#gallery ul#show li span a:hover {
  background-color: rgba(239, 205, 227, 0.3);
}

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



/*//////smp//////*/
@media all and (max-width: 767px) {

  /*gallery*/
  #gallery h2, #story h2 {
    font-size: 4.5vw;
    margin: -.5em 0 0 3%;
  }

  #gallery h2 span.num, #story h2 span.num {
    margin: 0;
    padding: 0;
  }

  #gallery ul#show li {
    margin: 1% 1%;
    width: 30%;
    width: -webkit-calc(100% / 3 - 2%);
    width: calc(100% / 3 - 2%);
  }

  #gallery ul#show li span a {
    width: 100%;
    height: 0;
    padding: 66.5% 0 0;
  }
}

@media all and (max-width: 320px) {
  #gallery #bknm li {
    width: 22.5%;
  }
  #gallery ul#show {
    width: 100%;
  }
  #gallery #contents {
    padding: 1%;
  }
  .low div.wrap {
    padding: 0;
  }
  h1 {
    padding-top: 72.280701754386%;
    /* margin: -20px 0 -6%; */
    z-index: 4;
  }
}
@media all and (min-width: 768px) {
  .low div.wrap {
    padding: 19em 0 4em;
  }
  #gallery ul#show {
    width: 83.8111111111%;
    margin: 0 auto;
  }
  h1 {
    z-index: 2;
    position: relative;
  }
}
#bknm {
  /* width: 100%; */
  /* margin: 3.5em auto 0; */
  padding: 2em;
  /* background-color: rgba(255, 255, 255, 0.5); */
  /* box-shadow: 2px 10px 15px rgba(3, 47, 63, 0.1); */
}
#bknm h3 {
  /* font-family: "Times New Roman"; */
  color: #e92828;
  text-align: left;
  font-size: 1.7rem;
  letter-spacing: .05em;
  font-weight: bold;
  /* margin: -1em 1em 0; */
}
#bknm ul {
  /* width: 95%; */
  /* margin: 1.5em auto 0; */
	text-align: left;
}
#bknm li {
  display: inline-block;
  margin: 0 0 15px 15px;
  position: relative;
}
#bknm li a {
  display: inline-block;
  width: 160px;
  height: 107px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 2px 5px 10px rgba(3, 47, 63, 0.1);
  border: 1px solid #fff;
}

#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; */
}
#bknm li a:hover:after {
  -moz-transform: scale(1.2);
  /* -webkit-transform: scale(1.2); */
  -ms-transform: scale(1.2);
  /* transform: scale(1.2); */
}
#bknm li span.epn {
  /* font-family: "Times New Roman"; */
  padding: 0% 5%;
  font-size: 100%;
  color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: 0 auto;
  /* z-index: 1; */
  background-color: #e92828;
}
#bknm li span.epn strong {
  font-size: 160%;
}
@media all and (max-width: 767px) {
	#bknm {
		margin: 3em auto 0;
		box-shadow: none;
		padding: 0;
	}
	#bknm h3 {
		font-size: 6.5vw;
		margin: -6% 5% 4%;
	}
#bknm ul {
		margin: 0 auto;
		letter-spacing: 0;
		text-align: left;
	}
#bknm li {
		width: 29%;
		height: auto;
		margin: 0 0 3% 3%;
	}
	#bknm li a {
		width: 100%;
		height: 0;
		padding: 66.6% 0 0;
	}
#bknm li a img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
#bknm li span {
		font-size: 3.5vw;
	}
}
#bknm li.bk9 a:after {
	background-position: top left;
}
}



/*	gallery mainpic
============================== */
body.gallery h1 {
  position: relative;
}
body.gallery h1::before {
  content: "";
  display: block;
  position: absolute;
}
@media all and (min-width: 768px) {
  body.gallery h1::before {
    width: 570px;
    height: 312px;
    background-size: cover;
    background-position: center;
    right: 1.6427104722793%;
    top: 2.2988505747126%;
  }
}
@media all and (max-width: 767px) {
body.gallery h1 {
  position: relative;/*相対配置*/
}
body.gallery h1::before {/*スペースを作る*/
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;/*指定したい幅*/
  padding-top: 54.736842%;/*画像の幅に対する高さ比率*/
  display: block;
  background-size: 100%;
}
body.gallery h1::after {/*画像を絶対配置*/
  position: absolute;
  content: '';
  bottom: 0;
  left:0;
  display: block;
  width: 100%;/*幅*/
  height: 75.666666%;/*どれだけデカくなってもはみ出ないであろう高さを指定*/
  background-size: contain;
  background-repeat: no-repeat;/*画像を繰り返さない*/
  background-size: cover;
  background-position: center;
  }
}
/*	pic setting
============================== */
.gallery #bknm li.bk1 a:after {
  background-image: url(../img/gallery/ep1/ep1_22.jpg);
}
.gallery #bknm li.bk2 a:after {
  background-image: url(../img/gallery/ep2/ep2_25.jpg);
}
.gallery #bknm li.bk3 a:after {
  background-image: url(../img/gallery/ep3/ep3_10.jpg);
}
.gallery #bknm li.bk4 a:after {
  background-image: url(../img/gallery/ep4/ep4_15.jpg);
}
.gallery #bknm li.bk5 a:after {
  background-image: url(../img/gallery/ep5/ep5_30.jpg);
}
.gallery #bknm li.bk6 a:after {
  background-image: url(../img/gallery/ep6/ep6_9.jpg);
}
.gallery #bknm li.bk7 a:after {
  background-image: url(../img/gallery/ep7/ep7_21.jpg);
}
.gallery #bknm li.bk8 a:after {
  background-image: url(../img/gallery/ep8/ep8_13.jpg);
}
.gallery #bknm li.bk9 a:after {
  background-image: url(../img/gallery/ep9/ep9_4.jpg);
}
.gallery #bknm li.bk10 a:after {
  background-image: url(../img/gallery/ep10/ep10_11.jpg);
}

@media all and (min-width: 768px) {
  body.gallery1 h1::before {
    background-image: url(../img/gallery/ep1/ep1_22.jpg?);
  }
  body.gallery2 h1::before {
    background-image: url(../img/gallery/ep2/ep2_25.jpg?);
  }
  body.gallery3 h1::before {
    background-image: url(../img/gallery/ep3/ep3_10.jpg?);
  }
  body.gallery4 h1::before {
    background-image: url(../img/gallery/ep4/ep4_15.jpg);
  }
  body.gallery5 h1::before {
    background-image: url(../img/gallery/ep5/ep5_30.jpg);
  }
  body.gallery6 h1::before {
    background-image: url(../img/gallery/ep6/ep6_9.jpg);
  }
  body.gallery7 h1::before {
    background-image: url(../img/gallery/ep7/ep7_21.jpg);
  }
  body.gallery8 h1::before {
    background-image: url(../img/gallery/ep8/ep8_13.jpg);
  }
  body.gallery9 h1::before {
    background-image: url(../img/gallery/ep9/ep9_4.jpg);
  }
  body.gallery10 h1::before {
    background-image: url(../img/gallery/ep10/ep10_11.jpg);
  }
}
@media all and (max-width: 767px) {
  body.gallery1 h1::after {
    background-image: url(../img/gallery/ep1/ep1_22.jpg?);
  }
  body.gallery2 h1::after {
    background-image: url(../img/gallery/ep2/ep2_25.jpg?);
  }
  body.gallery3 h1::after {
    background-image: url(../img/gallery/ep3/ep3_10.jpg?);
  }
  body.gallery4 h1::before {
    background-image: url(../img/gallery/ep4/ep4_15.jpg);
    background-size: 100%;
  }
  body.gallery5 h1::before {
    background-image: url(../img/gallery/ep5/ep5_30.jpg);
    background-size: 100%;
  }
  body.gallery6 h1::before {
    background-image: url(../img/gallery/ep6/ep6_9.jpg);
    background-size: 100%;
  }
  body.gallery7 h1::before {
    background-image: url(../img/gallery/ep7/ep7_21.jpg);
    background-size: 100%;
  }
  body.gallery8 h1::before {
    background-image: url(../img/gallery/ep8/ep8_13.jpg);
    background-size: 100%;
  }
  body.gallery9 h1::before {
    background-image: url(../img/gallery/ep9/ep9_4.jpg);
    background-size: 100%;
  }
  body.gallery10 h1::before {
    background-image: url(../img/gallery/ep10/ep10_11.jpg);
    background-size: 100%;
  }
}