@charset "utf-8";
/* CSS INFORMATION -====================================================
File name : story.css
Description : ストーリーページCSS
===================================================================== */
#story #main {
	padding-top: 0;
}

#story #main .inner {
	padding-bottom: 0px;
}

@media screen and (min-width:700px){
	#story #main .inner {
		padding-bottom: 100px;
	}
}

/* 見逃し配信 */
#story #main #mydo_area {
	width: 100%;
	height: 50px;
	background-color: #FFF;
	text-align: center;
	border-bottom: 1px solid #d3d3d3;
}

#story #main #mydo_area a {
	font-size: 1.6rem;
	line-height: 50px;
	color: #e2007d;
}

@media screen and (min-width:700px){
	#story #main #mydo_area {
		height: 60px;
	}

	#story #main #mydo_area a {
		line-height: 60px;
	}
}

/* ストーリー */
#story #main h1 {
    margin-top: 9.375%;
}

#story .img_main {
	width: 95%;
	background: url(../images/story/img_main_wrap_top_sp.jpg) no-repeat center top, url(../images/story/img_main_wrap_bottom_sp.jpg) no-repeat center bottom, url(../images/story/img_main_wrap_center_sp.jpg) no-repeat center center, url(../images/story/img_main_wrap_repeat_sp.jpg) repeat-y center top;
	background-size: 100% auto, 100% auto, 100% auto, 100% auto;
	margin-left: auto;
	margin-right: auto;
	padding: 5.8334%;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

#story .img_main a {
    width: 100%;
    height: 100%;
	position: relative;
	display: block;
    border-radius: 10px;
    overflow: hidden;
	transition: all 0.2s ease;
}

#story .img_main a::after {
	content: "";
    width: 100%;
    height: 100%;
	display: block;
	background: url(../images/common/btn_movie.png) no-repeat center center;
	background-size: 30% auto;
	position: absolute;
	top: 0;
	left: 0;
}

#story .img_main a:hover {
	opacity: 0.7;
}

#story #next-story_area .img_story-number {
	width: 11.6667%;
	margin: 4.1667% auto;
}

#story .text_title {
	font-size: 1.8rem;
	line-height: 1.2em;
	font-weight: bold;
	color: #e2007d;
	text-align: center;
	margin-bottom: 2.5%;
}

#story .text_onair {
	font-size: 1.4rem;
	line-height: 1em;
	text-align: center;
	padding-bottom: 2.5%;
}

#story .text_onair span {
	display: block;
	font-size: 1.2rem;
	line-height: 1.2em;
	padding-top: 1.6667%;
}

#story .text_next {
	width: 90%;
	font-size: 1.4rem;
	line-height: 1.5em;
	border-top: 1px dotted #a3a3a3;
	padding-top: 4.1667%;
	margin-left: auto;
	margin-right: auto;
}

#story .slider_img {
	margin-top: 8.3334%;
}

#story .slider_img ul li {
	position: relative;
}

#story .slider_img ul li::after {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	background: url(../images/story/list_image_wrap.png) no-repeat center center;
	background-size: 100% auto;
	position: absolute;
	top: 0;
	left: 0;
}

@media screen and (min-width:700px){
	#story #main h1 {
    	margin-top: 50px;
	}

	#story .img_main {
		width: 70.8334%;
		background: url(../images/story/img_main_wrap_top_pc.jpg) no-repeat center top, url(../images/story/img_main_wrap_bottom_pc.jpg) no-repeat center bottom, url(../images/story/img_main_wrap_center_pc.jpg) no-repeat center center, url(../images/story/img_main_wrap_repeat_pc.jpg) repeat-y center top;
		background-size: 100% auto, 100% auto, 100% auto, 100% auto;
		padding: 2.0834%;
	}

	#story .img_main a {
	    border-radius: 15px;
	}

	#story .img_main a::after {
		background: url(../images/common/btn_movie.png) no-repeat center center;
		background-size: 18.75% auto;
	}

	#story #next-story_area .img_story-number {
		width: 3.75%;
		margin-top: 2.5%;
		margin-bottom: 1.25%;
	}

	#story .text_title {
		font-size: 2.4rem;
		line-height: 1.2em;
		margin-bottom: 0.8334%;
	}

	#story .text_onair {
		font-size: 1.6rem;
		line-height: 1em;
		padding-bottom: 2.5%;
	}

	#story .text_onair span {
		font-size: 1.4rem;
		line-height: 1em;
		padding-top: 0.8334%;
	}

	#story .text_next {
		width: 66.6667%;
		font-size: 1.6rem;
		line-height: 2em;
		padding-top: 2.0834%;
	}

	#story .slider_img {
		margin-top: 5%;
	}

	#story .slider_img ul {
		text-align: center;
	}

	#story .slider_img ul li {
		width: 25%;
		display: inline-block;
		margin-left: 2.0834%;
		margin-right: 2.0834%;
	}
}

/* バックナンバー */
#backnumber {
	margin-top: 16.6667%;
}

#backnumber h1 {
	display: none;
}

#backnumber .back_wrap {
}

#backnumber .back_wrap ul li {
	width: 100%;
	height: 50px;
	background-color: #303030;
}

#backnumber .back_wrap ul li:not(:first-child) {
	border-top: 1px dotted #ffffff;
}

#backnumber .back_wrap ul li a {
	width: 100%;
	height: 100%;
	display: block;
}

#backnumber .back_wrap ul li .thumbs {
	display: none;
}

#backnumber .back_wrap ul li .img_story-number {
	width: auto;
	height: 25px;
	padding-top: 12px;
}

#backnumber .back_wrap ul li .img_story-number img {
	width: auto;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}

#backnumber .back_wrap ul li.non {
	display: none;
}

@media screen and (min-width:700px){
	#backnumber {
		width: 83.3334%;
		background: url(../images/story/bg_backnumber.jpg) repeat center top;
		background-size: 300px auto;
		margin-top: 5.8334%;
		margin-left: auto;
		margin-right: auto;
	}

	#story #main #backnumber h1 {
		width: 160px;
		height: auto;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-top: 5%;
	}

	#backnumber .back_wrap {
		margin-top: 2%;
		padding-bottom: 5%;
	}

	#backnumber .back_wrap ul {
		text-align: center;
	}

	#backnumber .back_wrap ul li {
		width: 21%;
		height: auto;
		background-color: transparent;
		background: url(../images/story/img_backnumber_wrap_top.jpg) no-repeat center top, url(../images/story/img_backnumber_wrap_bottom.jpg) no-repeat center bottom, url(../images/story/img_backnumber_wrap_center.jpg) no-repeat center center, url(../images/story/img_backnumber_wrap_repeat.jpg) repeat-y center top;
		background-size: 100% auto, 100% auto, 100% auto, 100% auto;
		display: inline-block;
		margin-left: 1%;
		margin-right: 1%;
		padding: 1.5%;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}

	#backnumber .back_wrap ul li:not(:first-child) {
		border-top: none;
	}

	#backnumber .back_wrap ul li a {
		position: relative;
	}

	#backnumber .back_wrap ul li .thumbs {
		border-radius: 10px;
		overflow: hidden;
		display: block;
		-webkit-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		-o-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transition:all .3s ease;
		transition:all .3s ease;
	}

	#backnumber .back_wrap ul li:hover .thumbs {
		 -webkit-transform: rotateY(-180deg);
		transform: rotateY(-180deg);
	}

	#backnumber .back_wrap ul li .img_story-number {
		width: 21.4286%;
		height: auto;
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		padding-top: 0;
		transform: translateY(-50%);
	}

	#backnumber .back_wrap ul li .img_story-number img {
		width: 100%;
		height: auto;
	}

	
}