/*------------------------------------------------------------------------------
								INTRO
------------------------------------------------------------------------------*/
#story {
	width: 100%;
	background: url("../../img/story/main.jpg") no-repeat center top / cover;
	padding: 4% 0 5%;
}
#wrapper {
	background: #000000!important;
}
.headline {
	width: 100%;
	padding-top: 12%;
	position: relative;
	overflow: hidden;
}
.headline ul {
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	background: #000000;
}
.headline ul li {
	width: 16.666%;
	height: 100%;
	background: #cccccc;
	float: left;
}
.headline ul .photo1 {background: url("../../img/story/photo1b.jpg") no-repeat center center / cover;}
.headline ul .photo2 {background: url("../../img/story/photo2b.jpg") no-repeat center center / cover;}
.headline ul .photo3 {background: url("../../img/story/photo3b.jpg") no-repeat center center / cover;}
.headline ul .photo4 {background: url("../../img/story/photo4b.jpg") no-repeat center center / cover;}
.headline ul .photo5 {background: url("../../img/story/photo5b.jpg") no-repeat center center / cover;}
.headline ul .photo6 {background: url("../../img/story/photo6b.jpg") no-repeat center center / cover;}

#story {
	width: 100%;
	background: #000000 url("../../img/story/main.jpg") no-repeat center top / 2000px;
	padding: 3% 0 4%;
}

p {
	line-height: 2.4em;
	text-align: justify;
	font-family: 'Noto Serif JP', serif!important;
	font-weight: 700;
/*	color: #30455a;*/
}
p span {
	font-size: 14px;
}
h3 {
	margin: 1em 0 0;
	line-height: 1.8em;
	font-family: 'Noto Serif JP', serif!important;
	font-weight: 700;
	font-size: 30px;
/*	color: #30455a;*/
}
.photo-area {
	width: 100%;
	position: relative;
	overflow: hidden;
	margin: 4% 0 0;
}
.each-area {
	width: 1120px;
	margin: 0 auto;
	margin-top: -60px!important;
	padding-top: 140px;
}
.each-area .each-headline {
	background: rgba(50,50,50,0.8);
	color: #FFFFFF;
	line-height: 1em;
	padding:1.1em 0 0.6em 1em;
	font-weight: 600;
	font-size: 24px;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	border-left: 6px solid rgba(229,179,41,0.8);
}
.each-area .each-headline span {
	float: left;
	margin-top: -0.145em;
}
.each-area .each-headline span.normal {
	display: block;
	font-family: 'Teko', sans-serif!important;
	font-weight: 500;
	font-size: 32px;
	margin: 0 0.06em 0;
	float: left;
}
.each-area .each-headline span small {
	font-size: 0.6em;
	margin-left: 0.2em;
}
.each-area .each-headline span.large {
	display: block;
	font-family: 'Teko', sans-serif!important;
	font-weight: 400;
	font-size: 50px;
	margin: 0 0.06em 0;
	float: left;
	margin-top: -0.04em;
	color: #dda91b;
}
.each-area .each-headline span em {
	font-style: normal;
	margin: 0 -0.5em;
}
.each-area .title {
	position: relative;
	overflow: hidden;
}
.each-area .title .episode {
	float: left;
	line-height: 1em;
	border: 1px solid #dda91b;
	padding: 0.3em 1em 0.25em;
	color: #dda91b;
	font-weight: 600;
	font-size: 24px;
	margin-right: 0.75em;
	position: relative;
	overflow: hidden;
}
.each-area .title .episode span {
	display:block;
	display:inline-block;
	float: left;
}
.each-area .title .episode span.large {
	display:block;
	font-family: 'Teko', sans-serif!important;
	margin: 0 0.2em;
	font-weight: 400;
	font-size: 1.35em;
	margin-top: 0.11em;
	float: left;
}
.each-area .title .ep-title {
	font-size: 36px;
	line-height: 1.15em;
	font-weight: 600;
	float: left;
}
.each-area .wowow-link {
	position: relative;
	overflow: hidden;
}
.each-area .wowow-link .prime {
	background: rgba(50,50,50,0.8) url("../../img/story/wowow-prime.gif") no-repeat left top / contain;
	box-sizing: border-box;
	padding-left: 9em;
	padding-right: 2.5em;
	font-size: 17px;
	line-height: 2.4em;
	float: left;
	margin-right: 1em;
	position: relative;
}
.each-area .wowow-link .ondemand {
	background: rgba(50,50,50,0.8) url("../../img/story/wowow-ond.gif") no-repeat left top / contain;
	box-sizing: border-box;
	padding-left: 9em;
	padding-right: 2.5em;
	font-size: 17px;
	line-height: 2.4em;
	float: left;
	position: relative;
}
.each-area .wowow-link .prime::after,.each-area .wowow-link .ondemand::after {
	width: 36px;
	height: 100%;
	content: "";
	position: absolute;
	top:0px;
	right:0px;
	background: url("../../img/common/arrow4.png") no-repeat center center / 1em;
	opacity: 0.5;
}
.each-area .wowow-link .prime a , .each-area .wowow-link .ondemand a {
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	text-indent:-999999px;
}
.each-area .photo-a {
	padding-top: 60%;
}
.each-area #photo-1a {background: rgba(50,50,50,0.8) url("../../img/story/photo-1a.jpg") no-repeat center center / cover;}
.each-area #photo-2a {background: rgba(50,50,50,0.8) url("../../img/story/photo-2a.jpg") no-repeat center center / cover;}
.each-area #photo-3a {background: rgba(50,50,50,0.8) url("../../img/story/photo-3a.jpg") no-repeat center center / cover;}
.each-area #photo-4a {background: rgba(50,50,50,0.8) url("../../img/story/photo-4a.jpg") no-repeat center center / cover;}
.each-area #photo-5a {background: rgba(50,50,50,0.8) url("../../img/story/photo-5a.jpg") no-repeat center center / cover;}
.each-area #photo-6a {background: rgba(50,50,50,0.8) url("../../img/story/photo-6a.jpg") no-repeat center center / cover;}
.each-area #photo-7a {background: rgba(50,50,50,0.8) url("../../img/story/photo-7a.jpg") no-repeat center center / cover;}
.each-area #photo-8a {background: rgba(50,50,50,0.8) url("../../img/story/photo-8a.jpg") no-repeat center center / cover;}
.each-area #photo-9a {background: rgba(50,50,50,0.8) url("../../img/story/photo-9a.jpg") no-repeat center center / cover;}
.each-area .txt {
	line-height: 2em;
	font-size: 18px;
}
.each-area .box {
	position: relative;
	overflow: hidden;
}
.each-area .photo-b {
	width: 50%;
	float: left;
	padding-top: 33.333%;
}
.each-area .photo-c {
	width: 50%;
	float: right;
	padding-top: 33.333%;
}
.each-area #photo-1b {background: rgba(50,50,50,0.8) url("../../img/story/photo-1b.jpg") no-repeat center center / cover;}
.each-area #photo-1c {background: rgba(50,50,50,0.8) url("../../img/story/photo-1c.jpg") no-repeat center center / cover;}
.each-area #photo-2b {background: rgba(50,50,50,0.8) url("../../img/story/photo-2b.jpg") no-repeat center center / cover;}
.each-area #photo-2c {background: rgba(50,50,50,0.8) url("../../img/story/photo-2c.jpg") no-repeat center center / cover;}
.each-area #photo-3b {background: rgba(50,50,50,0.8) url("../../img/story/photo-3b.jpg?ver1") no-repeat center center / cover;}
.each-area #photo-3c {background: rgba(50,50,50,0.8) url("../../img/story/photo-3c.jpg?ver1") no-repeat center center / cover;}
.each-area #photo-4b {background: rgba(50,50,50,0.8) url("../../img/story/photo-4b.jpg") no-repeat center center / cover;}
.each-area #photo-4c {background: rgba(50,50,50,0.8) url("../../img/story/photo-4c.jpg") no-repeat center center / cover;}
.each-area #photo-5b {background: rgba(50,50,50,0.8) url("../../img/story/photo-5b.jpg") no-repeat center center / cover;}
.each-area #photo-5c {background: rgba(50,50,50,0.8) url("../../img/story/photo-5c.jpg") no-repeat center center / cover;}
.each-area #photo-6b {background: rgba(50,50,50,0.8) url("../../img/story/photo-6b.jpg") no-repeat center center / cover;}
.each-area #photo-6c {background: rgba(50,50,50,0.8) url("../../img/story/photo-6c.jpg") no-repeat center center / cover;}
.each-area #photo-7b {background: rgba(50,50,50,0.8) url("../../img/story/photo-7b.jpg") no-repeat center center / cover;}
.each-area #photo-7c {background: rgba(50,50,50,0.8) url("../../img/story/photo-7c3.jpg") no-repeat center center / cover;}
.each-area #photo-8b {background: rgba(50,50,50,0.8) url("../../img/story/photo-8b.jpg") no-repeat center center / cover;}
.each-area #photo-8c {background: rgba(50,50,50,0.8) url("../../img/story/photo-8c.jpg") no-repeat center center / cover;}
.each-area #photo-9b {background: rgba(50,50,50,0.8) url("../../img/story/photo-9b.jpg") no-repeat center center / cover;}
.each-area #photo-9c {background: rgba(50,50,50,0.8) url("../../img/story/photo-9c.jpg") no-repeat center center / cover;}
.backnumber {
	width: 100%;
}
.backnumber .backnumber-tit {
	background: #dda91b;
	color: #000000;
	line-height: 1em;
	box-sizing: border-box;
	padding: 0.7em 0 0.7em 0;
	font-weight: 700;
	text-align: center;
}
.backnumber ul {
	position: relative;
	overflow: hidden;
}
.backnumber ul li {
	width: 32%;
	float: left;
	margin-right: 2%;
	margin-bottom: 2%;
	position: relative;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: #FFFFFF
}
.backnumber ul li a {
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	text-indent:-999999px;
}
.backnumber ul li:nth-child(3n) {
	margin-right: 0px;
}
.backnumber ul li .bn-photo {
	width: 100%;
	padding-top: 50%;
	height: 0px;
	position: relative;
	overflow: hidden;
}
.backnumber ul li .bn-photo div {
	width: 100%;
	padding-top: 50%;
	position: absolute;
	top:0px;
	left:0px;
}
.backnumber ul li .bn-photo div {
	-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transform: scale(1,1);
}
.backnumber ul li:hover .bn-photo div {
	-webkit-transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
	transform: scale(1.05,1.05);
}
.backnumber ul li #bn-photo1 div {
	background: rgba(50,50,50,0.8) url("../../img/story/photo-1a.jpg") no-repeat center center / cover;
}
.backnumber ul li #bn-photo2 div {
	background: rgba(50,50,50,0.8) url("../../img/story/photo-2a.jpg") no-repeat center center / cover;
}
.backnumber ul li #bn-photo3 div {
	background: rgba(50,50,50,0.8) url("../../img/story/photo-3a.jpg") no-repeat center center / cover;
}
.backnumber ul li #bn-photo4 div {
	background: rgba(50,50,50,0.8) url("../../img/story/photo-4a.jpg") no-repeat center center / cover;
}
.backnumber ul li #bn-photo5 div {
	background: rgba(50,50,50,0.8) url("../../img/story/photo-5a.jpg") no-repeat center center / cover;
}
.backnumber ul li #bn-photo6 div {
	background: rgba(50,50,50,0.8) url("../../img/story/photo-6a.jpg") no-repeat center center / cover;
}
.backnumber ul li #bn-photo7 div {
	background: rgba(50,50,50,0.8) url("../../img/story/photo-7a.jpg") no-repeat center center / cover;
}
.backnumber ul li #bn-photo8 div {
	background: rgba(50,50,50,0.8) url("../../img/story/photo-8a.jpg") no-repeat center center / cover;
}
.backnumber ul li #bn-photo9 div {
	background: rgba(50,50,50,0.8) url("../../img/story/photo-9a.jpg") no-repeat center center / cover;
}
.backnumber ul li .title {
	margin: 0px;
	padding: 0px;
	height: 40px;
	overflow: hidden;
}

.backnumber ul li .title .episode {
	float: left;
	overflow: hidden;
	line-height: 40px;
	height: 40px;
	box-sizing: border-box;
	padding: 0 0 0 1em;
	width: 4.5em;
	color: #000000;
	font-weight: 600;
	font-size: 18px;
	margin-right: 0.75em;
	position: relative;
	overflow: hidden;
	background: #dda91b;
}
.backnumber ul li .title .episode span {
	display:block;
	display:inline-block;
	float: left;
}
.backnumber ul li .title .episode span.large {
	display:block;
	font-family: 'Teko', sans-serif!important;
	margin: 0 0.2em;
	font-weight: 400;
	font-size: 1.2em;
	margin-top: 0.15em;
	float: left;
}
.backnumber ul li .title .ep-title {
	color: #000000;
	font-size: 19px;
	height: 40px;
	font-weight: 600;
	line-height: 40px;
	box-sizing:border-box;
}
.st-page-navi {
	width: 660px;
	margin: 0 auto;
	position: relative;
	line-height: 1em;
	height: 44px;
}
.st-page-navi li {
	position: absolute;
	width: 33.333%;
	top:0px;
	height: 22px;
	line-height: 22px;
	font-size: 22px;
	box-sizing: border-box;
	letter-spacing: 0.2em;
}
.st-page-navi-left {
	left:0px;
	text-align: left;
	background: url("../../img/common/arrow2.png") no-repeat right top 4px / 18px;
	transform: scale(-1, 1);
}
.st-page-navi-left a {
	transform: scale(-1, 1);
}
.st-page-navi-center {
	left:50%;
	text-align: center;
	margin-left: -16.666%;
	border-bottom: 4px solid #b4984e;
	font-weight: 600;
	padding:0 0 36px 0;
}
.st-page-navi-right {
	right:0px;
	text-align: right;
	background: url("../../img/common/arrow2.png") no-repeat right top 4px / 18px;
}
.st-page-navi-left a {
	padding:0 0 36px 30px;
}
.st-page-navi-right a {
	padding:0 30px 36px 0;
}
.st-page-navi li a {
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	height: 100%;
	top:0px;
	left: 0px;
	z-index: 10;
}
@media screen and (max-width: 1440px) {
.tablet {
	display: block;
}
}
/*------------------------------------------------------------------------------
								SP
------------------------------------------------------------------------------*/
@media screen and (max-width: 1000px) {
.tablet {
	display: none;
}
.headline {
	width: 100%;
	padding-top: 48%;
	position: relative;
	overflow: hidden;
}
.headline ul li {
	width: 33.3333%;
	height: 50%;
	float: left;
}
#story {
	width: 100%;
	background: #000000 url("../../img/story/main.jpg") no-repeat center top / 1000px;
	padding: 3% 0 4%;
}
p {
	line-height: 2em;
	text-align: justify;
}
p span {
	font-size: 2.2vw;
}
h3 {
	line-height: 1.8em;
	font-size: 4vw;
}
.each-area {
	width: 100%;
	margin: 0 auto;
	margin-top: -7vw!important;
	padding-top: 15vw;
}
.each-area .each-headline {
	font-size: 4vw;
	border-left: 10px solid rgba(229,179,41,0.8);
}
.each-area .title .episode {
	border: 2px solid #dda91b;
	font-size: 4vw;
}
.each-area .each-headline span.normal {
	font-size: 5.5vw;
}
.each-area .title .ep-title {
	font-size: 5vw;
	line-height: 1.4em;
}
.each-area .wowow-link {
width: 100%;
}
.each-area .wowow-link .prime {
	background: rgba(50,50,50,0.8) url("../../img/story/wowow-prime.gif") repeat-y left center / 8em auto;
	width: 100%;
	padding-right: 0px;
	padding-left: 9em;
	font-size: 2.9vw;
	margin-bottom: 2vw;
	line-height: 2.6em;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
}
.each-area .wowow-link .ondemand {
	background: rgba(50,50,50,0.8) url("../../img/story/wowow-ond.gif") repeat-y left center / 8em auto;
	width: 100%;
	padding-right: 0px;
	padding-left: 9em;
	font-size: 2.9vw;
	line-height: 1.3em;
	padding-top: 0.1em;
	padding-bottom: 0.1em;
}
.each-area .wowow-link .prime::after,.each-area .wowow-link .ondemand::after {
	width: 2.2em;
	top:0px;
	right:0px;
	background: url("../../img/common/arrow4.png") no-repeat center center / 1.25em;
}
.each-area #photo-1a {
	background-size: cover;
}
.each-area #photo-2a {
	background-size: cover;
}
.each-area .txt {
	font-size: 3vw;
}
.backnumber {
	width: 100%;
}
.backnumber .backnumber-tit {
	font-size: 3.6vw;
}
.backnumber ul li {
	width: 49%!important;
	margin-right: 2%!important;
	margin-bottom: 2%!important;
	-webkit-border-radius: 1vw;
	-moz-border-radius: 1vw;
	border-radius: 1vw;
}
.backnumber ul li:nth-child(2n) {
	margin-right: 0px!important;
}
.backnumber ul li .bn-photo div {
	-webkit-transition: none;
	transition:         none;
	transform: scale(1,1);
}
.backnumber ul li:hover .bn-photo div {
	-webkit-transition: none;
	transition:         none;
	transform: scale(1,1);
}
.backnumber ul li .title {
	height: 6vw;
}

.backnumber ul li .title .episode {
	line-height: 6vw;
	height: 6vw;
	width: 3.8em;
	padding: 0 0 0 0.5em;
	font-size: 2.4vw;
}
.backnumber ul li .title .ep-title {
	font-size: 2.4vw;
	height: 6vw;
	line-height: 6vw;
}
.page-navi {
	width: 100%;
	line-height: 1em;
	height: 12vw;
}
.page-navi li {
	height: 11vw;
	line-height: 11vw;
	font-size: 3.5vw;
}
.page-navi-left {
	background: url("../../img/common/arrow2.png") no-repeat left top 4.25vw / 3vw;
}
.page-navi-center {
	border-bottom: 1vw solid #b4984e;
	padding:0 0 2vw 0;
}
.page-navi-right {
	background: url("../../img/common/arrow2.png") no-repeat right top 4.25vw / 3vw;
}
.page-navi-left a {
	padding:0 0 2vw 4vw;
}
.page-navi-right a {
	padding:0 4vw 2vw 0;
}
}

@media print{
.main ul li .photo-none {
	display:none;
}
}