/* =================================
	gallery CSS
================================= */

@media all and (min-width: 768px) {
.gallery div.contents{
	padding: 35px 70px 150px;
}
p.info_text{
	text-align: center;
	margin:10px 0 15px; 
}
div.gallery_area{
	padding: 10px 55px 30px;
}
}
@media all and (max-width: 767px) {
p.info_text{
	text-align: center;
	margin:0px 0 5px; 
}
div.gallery_area{
	padding: 10px 0 20px;
}
}

/*	h2
============================== */

main .story01 header h2, main .gallery01 header h2 {background-image:url(../img/midashi_h2_01.png);}
main .story02 header h2, main .gallery02 header h2 {background-image:url(../img/midashi_h2_02.png);}
main .story03 header h2, main .gallery03 header h2 {background-image:url(../img/midashi_h2_03.png);}
main .story04 header h2, main .gallery04 header h2 {background-image:url(../img/midashi_h2_04.png);}
main .story05 header h2, main .gallery05 header h2 {background-image:url(../img/midashi_h2_05.png);}
main .story06 header h2, main .gallery06 header h2 {background-image:url(../img/midashi_h2_06.png);}
main .story07 header h2, main .gallery07 header h2 {background-image:url(../img/midashi_h2_07.png);}
main .story08 header h2, main .gallery08 header h2 {background-image:url(../img/midashi_h2_08.png);}
main .story09 header h2, main .gallery09 header h2 {background-image:url(../img/midashi_h2_09.png);}
main .story10 header h2, main .gallery10 header h2 {background-image:url(../img/midashi_h2_10.png);}
@media all and (min-width: 768px) {
main .oa header h2{
	width: 820px;
	height: 64px;
	text-indent:110%;white-space:nowrap;overflow:hidden;
	margin: 0 0 25px;
}
}
@media all and (max-width: 767px) {
main .oa header h2{
	padding-top: 7.804%;
    overflow: hidden;
    height: 0;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0 0 15px;
}
}

/*	backnumber
============================== */

/* .bknm h3 */
.story .bknm,
.gallery .bknm {
	border-top: 3px dashed #165078;
}
.bknm h3{
  background-image:url(../img/bknm_tit.png);
  background-repeat:no-repeat;
  text-indent:110%;white-space:nowrap;overflow:hidden;
}
@media all and (min-width: 768px) {
.story .bknm{
  clear: both;
}
.bknm h3{ width: 200px; height: 35px; background-size: 200px 35px;
  margin: 20px auto 0;
  padding:10px 0;
}
}
@media all and (max-width: 767px) {
.bknm h3{ width: 150px; height: 26px; background-size: 150px 26px;
margin:10px auto 10px;}
}

/* バックナンバー*/
.story .ep1{ background-image: url(../img/story/story01_main.jpg);}
.story .ep2{ background-image: url(../img/story/story02_main.jpg);}
.story .ep3{ background-image: url(../img/story/story03_main.jpg);}
.story .ep4{ background-image: url(../img/story/story04_main.jpg);}
.story .ep5{ background-image: url(../img/story/story05_main.jpg);}
.story .ep6{ background-image: url(../img/story/story06_main.jpg);}
.story .ep7{ background-image: url(../img/story/story07_main.jpg);}
.story .ep8{ background-image: url(../img/story/story08_main.jpg);}
.story .ep9{ background-image: url(../img/story/story09_main.jpg);}
.story .ep10{ background-image: url(../img/story/story10_main.jpg);}

.gallery .ep1{ background-image: url(../gallery/img/gallery1/1.jpg);}
.gallery .ep2{ background-image: url(../gallery/img/gallery2/1.jpg);}
.gallery .ep3{ background-image: url(../gallery/img/gallery3/1.jpg);}
.gallery .ep4{ background-image: url(../gallery/img/gallery4/1.jpg);}
.gallery .ep5{ background-image: url(../gallery/img/gallery5/1.jpg);}
.gallery .ep6{ background-image: url(../gallery/img/gallery6/1.jpg);}
.gallery .ep7{ background-image: url(../gallery/img/gallery7/1.jpg);}
.gallery .ep8{ background-image: url(../gallery/img/gallery8/1.jpg);}
.gallery .ep9{ background-image: url(../gallery/img/gallery9/1.jpg);}
.gallery .ep10{ background-image: url(../gallery/img/gallery10/1.jpg);}

.bknm ul {
  margin: 0 auto;
  padding: 0 0 1em;
}

.bknm li {
  display: inline-block;
  margin: 0 0 .7em .3em;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  position: relative;
}

.bknm li a {
  color: #fff;
  display: block;
  box-sizing: border-box;
  font-size: 100%;
  text-decoration: none;
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.bknm li span {
  margin-top: 20px;
}

.bknm li span.epi {
  background: #003a63;
  padding: 2px 5px;
  margin: 0 0 0 0;
  color: #fff;
  position: absolute;
  left: -2px;
  top: -2px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: bold;
  letter-spacing: 1px;
}

.bknm li span.date {
  padding: .2em;
}

@media all and (min-width: 768px) {
.bknm li {
    width: 195px;
    height: 130px;
  }
.bknm li a {
    width: 100%;
    height: 130px;
    border: 2px solid #b4daef;
  }
.bknm li a:hover {
    text-decoration: none;
    border: 2px solid #1b4c75;
  }
}

@media all and (max-width: 767px) {
.bknm ul {
    margin: 1em auto 0;
    padding: 0;
  }
.bknm li {
    float: left;
    width: 48%;
    margin: 0 4% 4% 0;
  }
.bknm li:nth-child(even) {
    margin: 0 0 4% 0;
  }
.bknm li a {
    height: 100%;
    padding-top: 66.6666%;
    font-size: 80%;
    border: 1px solid #b4daef;
  }
.bknm li span {
    font-size: 100%;
  }
}