/*story*/

#storyArea {position: relative; z-index: 50;}
#story #storyArea h2 { padding-bottom: 25px; text-align: center;
border-bottom: 6px solid;
    border-image: linear-gradient(to right, #fc8cb4, #bfd0ff);
    border-image-slice: 1;}

#story h2 .epnum {color: #7095ff; font-size: 2.0em;
 font-family: ryo-gothic-plusn, sans-serif;
    font-weight: 700;
    font-style: normal;}

#story h2 .oadate { font-size: 3.0em;
    font-family: azo-sans-web, sans-serif;
    font-weight: 700;
    font-style: normal;
}
#story h2 .oadate .small { font-size: 0.5em;}

section.txtArea { padding: 25px 0 15px;}

#storyArea #story #ph span {
  display: block;
  position: relative;
background-size: 100%;
}

@media all and (min-width: 768px) {
	#story h2 .epnum { margin-right: 20px;}
	
	#trailer .movieBox {width:750px; margin: 0 auto; position: relative; }
	#trailer .movieBox::after {
  /* 疑似要素で同じ大きさのboxを作り、position: absoluteで背面に表示 */
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* ①疑似要素のボックスを影色で塗りつぶし */
 background: linear-gradient(#bfd0ff, #fc8cb4);
  /* ②ブラーフィルターでぼかす */
  filter: blur(0px);
  /* ③位置やサイズを調整 */
  transform: translateY(20px) translateX(20px) scale(1.00);
  /* ④乗算で重ねる */
		mix-blend-mode: multiply;
	opacity: 0.5;}
	
#trailer div {width:750px;}
#trailer iframe {width:750px; height:422px;}
	
	


.photoArea { letter-spacing: -.4em; text-align: center; padding-bottom: 2em;}	

.photoArea p.ph_cut {margin: 20px auto 0; position: relative; display: inline-block; background-color: #fff; }
.photoArea p.ph_cut:nth-child(odd){margin-right:20px;}
.photoArea p.ph_cut ::after {
  /* 疑似要素で同じ大きさのboxを作り、position: absoluteで背面に表示 */
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* ①疑似要素のボックスを影色で塗りつぶし */
 background: linear-gradient(#bfd0ff, #fc8cb4);
  /* ②ブラーフィルターでぼかす */
  filter: blur(0px);
  /* ③位置やサイズを調整 */
  transform: translateY(8px) translateX(8px) scale(1.00);
  /* ④乗算で重ねる */
		mix-blend-mode: multiply;
	opacity: 0.5;}


.photoArea p.ph_cut, .photoArea p.ph_cut span, .photoArea p.ph_cut span img {
		width: 434px;
		height: 287px;
		background-position: center top;
	}
	.story #bknm { margin-top: 2em;}

}
@media all and (max-width: 767px) {
	.contentsBox { padding-top: 20px;}

	#story #storyArea h2 { padding-bottom: 15px;}
	#story h2 .epnum { font-size: 1.4em; margin-right: 10px;}
	#story h2 .oadate { font-size: 2.0em;}
	
	#story #trailer {
    margin: 0 0.2em 0.2em 0;
}

	#trailer { width:100%; position: relative;}
	#trailer::after {
  /* 疑似要素で同じ大きさのboxを作り、position: absoluteで背面に表示 */
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* ①疑似要素のボックスを影色で塗りつぶし */
 background: linear-gradient(#bfd0ff, #fc8cb4);
  /* ②ブラーフィルターでぼかす */
  filter: blur(0px);
  /* ③位置やサイズを調整 */
  transform: translateY(8px) translateX(8px) scale(1.00);
  /* ④乗算で重ねる */
		mix-blend-mode: multiply;
	opacity: 0.5;}
	
	section.txtArea { padding-top: 15px;}
	
	.photoArea { padding: 0 0.5em 1em;}

	.photoArea p.ph_cut {    margin: 0.5em 0 1.5em; position: relative; background-color: #fff; }
.photoArea p.ph_cut ::after {
  /* 疑似要素で同じ大きさのboxを作り、position: absoluteで背面に表示 */
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* ①疑似要素のボックスを影色で塗りつぶし */
 background: linear-gradient(#bfd0ff, #fc8cb4);
  /* ②ブラーフィルターでぼかす */
  filter: blur(0px);
  /* ③位置やサイズを調整 */
  transform: translateY(8px) translateX(8px) scale(1.00);
  /* ④乗算で重ねる */
		mix-blend-mode: multiply;
	opacity: 0.5;}

  #story #trailer .ph_cut {
    width: 100%;
    height: 0;
    padding: 66.6% 0 0;
    margin: 0 auto;
    border: none;
    box-shadow: none;
  }

  #story .ph_area {
    margin: 2% auto 0;
    /* width: 98%; */
    text-align: center;
  }
	

}

@media all and (max-width: 365px) {
	#story h2 .oadate { /*position: static; margin: 0 auto;*/ font-size: 1.8em; display: inline-block;}
}

#story #contents .inner p a {
  color: #e95098;
}
#story #contents .inner p a:hover {
  text-decoration: underline;
}



#story #ph_main {margin: 0 auto;}
#story #ph_main span {
  display: block;
  position: relative;
}
#story #ph_main span {
  background-size: 100%;
}
@media all and (min-width: 768px) {

#story #ph_main,
#story #ph_main span {
    width: 750px;
	height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
}
@media all and (max-width: 767px) {
#story #ph_main span img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

#story #ph_main {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

#story #ph_main span {
    height: 0;
    padding: 66.66666% 0 0;
    position: relative;
  }
}