/*------------------------------------------------------------------------------
								INTRO
------------------------------------------------------------------------------*/
#cast {
	width: 100%;
	background: url("../../img/cast/bg2.jpg") no-repeat center top / cover;
	padding: 4% 0 5%;
}
.cast-box {
	min-height: 800px;
	position: relative;
	overflow: hidden;
}
.left-box {
	width: 52%;
	height: 100%;
	min-height: 800px;
	position: relative;
	float: left;
}
.left-box li {
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: none;
}
.left-box li div {
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}
.left-box li div .txt-box p {
	position: absolute;
	bottom: 20px;
	left: 20px;
	font-size: 22px;
	line-height: 1em;
	font-family: 'Noto Serif JP', sans-serif;
	font-weight: 900;
	color: #b4984e;
}
.left-box li div .txt-box p span {
	background: #000000;
	display: inline-flex;
	padding: 0.4em 0.2em 0.4em 0.5em;
	margin-top: 10px;
}
.left-box li#cast-photo1 {display: block;}
#cast-photo1 div {background: url("../../img/cast/drama-photo1b.jpg") no-repeat center top / auto 800px;}
#cast-photo2 div {background: url("../../img/cast/drama-photo2.jpg") no-repeat center top / auto 800px;}
#cast-photo3 div {background: url("../../img/cast/drama-photo3.jpg") no-repeat center top / auto 800px;}
#cast-photo4 div {background: url("../../img/cast/drama-photo4.jpg") no-repeat center top / auto 800px;}
#cast-photo5 div {background: url("../../img/cast/drama-photo5.jpg") no-repeat center top / auto 800px;}
#cast-photo6 div {background: url("../../img/cast/drama-photo6.jpg") no-repeat center top / auto 800px;}
#cast-photo7 div {background: url("../../img/cast/drama-photo7.jpg") no-repeat center top / auto 800px;}
#cast-photo8 div {background: url("../../img/cast/drama-photo8.jpg") no-repeat center top / auto 800px;}
#cast-photo9 div {background: url("../../img/cast/drama-photo9.jpg") no-repeat center top / auto 800px;}
#cast-photo10 div {background: url("../../img/cast/drama-photo10.jpg") no-repeat center top / auto 800px;}
#cast-photo11 div {background: url("../../img/cast/drama-photo11.jpg") no-repeat center top / auto 800px;}
#cast-photo12 div {background: url("../../img/cast/drama-photo12.jpg") no-repeat center top / auto 800px;}
#cast-photo13 div {background: url("../../img/cast/drama-photo13.jpg") no-repeat center top / auto 800px;}
#cast-photo14 div {background: url("../../img/cast/drama-photo14.jpg") no-repeat center top / auto 800px;}
#cast-photo15 div {background: url("../../img/cast/drama-photo15.jpg") no-repeat center top / auto 800px;}
#cast-photo16 div {background: url("../../img/cast/drama-photo16.jpg") no-repeat center top / auto 800px;}
#cast-photo17 div {background: url("../../img/cast/drama-photo17b.jpg") no-repeat center top / auto 800px;}
#cast-photo18 div {background: url("../../img/cast/drama-photo18.jpg") no-repeat center top / auto 800px;}
#cast-photo19 div {background: url("../../img/cast/drama-photo19.jpg") no-repeat center top / auto 800px;}
.right-box {
	width: 48%;
	min-height: 800px;
	position: relative;
	box-sizing: border-box;
	float: right;
}
.name {
	display: none;
}
#name1 {
	display: block;
}
.txt-area {
	display: none;
}
#txt-area1 {
	display: block;
}
.right-box li.absolute {
	position: absolute;
	top:auto;
	bottom:0px;
	left:0px;
	width: 100%;
	height: auto;
	padding-left: 6%;
	box-sizing: border-box;
}
.right-box .chara .name h3 {
	font-size: 60px;
	font-family: 'Noto Serif JP', sans-serif;
	font-weight: 900;
	line-height: 1em;
	position: relative;
}
.right-box .chara .name h3 span {
	position: absolute;
	bottom:-34px;
	left:340px;
	font-size: 20px;
	margin-left:1em;
	line-height: 1em;
}
.right-box .chara .name h4 {
	font-size: 40px;
	font-family: 'Noto Serif JP', sans-serif;
	font-weight: 900;
	line-height: 1em;
	margin-top: 30px;
}
.right-box .chara .name h5 {
	font-size: 36px;
	font-family: 'Teko', sans-serif!important;
	font-weight: 500;
	line-height: 1em;
	margin-top: -8px;
	color: #b4984e;
	letter-spacing: 0.1em;
}
.right-box .txt-area h6 {
	font-size: 24px;
	font-family: 'Teko', sans-serif!important;
	font-weight: 500;
	line-height: 1em;
	margin-top: 20px;
	color: #b4984e;
	letter-spacing: 0.1em;
}
.right-box .txt-area p {
	font-size: 18px;
	line-height: 1.7em;
	text-align: justify;
	margin-top: 10px;
}
.arrow {
	width: 140px;
	height: 80px;
	position: absolute;
	overflow: hidden;
	top:0px;
	right:0px;
	z-index: 8;
}
.arrow li {
	width: 40px;
	height: 80px;
	float: none;
	position: relative;
}
.arrow li a {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0px;
	left:0px;
	text-indent: -999999px;
}
.arrow li.arrow-left {
	background: url("../../img/cast/arrow.png") no-repeat center center / contain;
	margin-right: 0;
	float: left;
}
.arrow li.arrow-right {
	background: url("../../img/cast/arrow.png") no-repeat center center / contain;
	transform: scaleX(-1.0);
	float: right;
}
.sub-photo-box {
	margin-top: 4%;
	width: 100%;
	padding-top: 34%;
	position: relative;
}
.sub-photo1 {
	width: 50%;
	position: absolute;
	top:0px;
	left:0px;
	height: 100%;
}
.sub-photo2 {
	width: 50%;
	position: absolute;
	top:0px;
	right:0px;
	height: 100%;
}
.sub-photo1-1 {background: url("../../img/cast/drama-sub1-1.jpg") no-repeat center top / cover;}
.sub-photo1-2 {background: url("../../img/cast/drama-sub1-2.jpg") no-repeat center top / cover;}
.sub-photo2-1 {background: url("../../img/cast/drama-sub2-1.jpg") no-repeat center top / cover;}
.sub-photo2-2 {background: url("../../img/cast/drama-sub2-2.jpg") no-repeat center top / cover;}
.sub-photo18-1 {background: url("../../img/cast/drama-sub3-1.jpg") no-repeat center top / cover;}
.sub-photo18-2 {background: url("../../img/cast/drama-sub3-2.jpg") no-repeat center top / cover;}
.sub-photo19-1 {background: url("../../img/cast/drama-sub4-1.jpg") no-repeat center top / cover;}
.sub-photo19-2 {background: url("../../img/cast/drama-sub4-2.jpg") no-repeat center top / cover;}

#naviArea {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
}
#naviArea li {
	height: 20%;
	margin-right: 0.5%;
	position: relative;
	float: left;
	margin-bottom: 0.5%;
	padding-top: 9.55%;
	width: 9.55%;
}
#naviArea li:nth-child(9),#naviArea li:nth-child(19) {
	margin-right: 0px;;
	
}
#naviArea li#navi1 {
	top:auto;
	left:auto;
	width: 17.15%!important;
}
#naviArea li#navi2 {
	top:auto;
	left:auto;
	width: 12%!important;
}
#naviArea li#navi3 {
	top:auto;
	left:auto;
}
#naviArea li#navi4 {
	top:auto;
	left:auto;
}
#naviArea li#navi5 {
	top:auto;
	left:auto;
}
#naviArea li#navi6 {
	top:auto;
	left:auto;
}
#naviArea li#navi7 {
	top:auto;
	left:auto;
}
#naviArea li#navi8 {
	top:auto;
	left:auto;
}
#naviArea li#navi9 {
	top:auto;
	left:auto;
}
#naviArea li#navi10 {
	top:auto;
	left:auto;
}
#naviArea li#navi11 {
	top:auto;
	left:auto;
}
#naviArea li#navi12 {
	top:auto;
	left:auto;
}
#naviArea li#navi13 {
	top:auto;
	left:auto;
}
#naviArea li#navi14 {
	top:auto;
	left:auto;
}
#naviArea li#navi15 {
	top:auto;
	left:auto;
}
#naviArea li#navi16 {
	top:auto;
	left:auto;
}
#naviArea li#navi17 {
	top:auto;
	left:auto;
}
#naviArea li#navi18 {
	top:auto;
	left:auto;
}
#naviArea li#navi19 {
	top:auto;
	left:auto;
}
#naviArea li:last-child {
	margin-left: 0px;
}
#naviArea li#navi1 {background: url("../../img/cast/drama-photo1.jpg") no-repeat center top 10% / cover;}
#naviArea li#navi2 {background: url("../../img/cast/drama-photo2.jpg") no-repeat center top 20% / cover;}
#naviArea li#navi3 {background: url("../../img/cast/drama-photo3.jpg") no-repeat center top / cover;}
#naviArea li#navi4 {background: url("../../img/cast/drama-photo4.jpg") no-repeat center top / cover;}
#naviArea li#navi5 {background: url("../../img/cast/drama-photo5.jpg") no-repeat center top / cover;}
#naviArea li#navi6 {background: url("../../img/cast/drama-photo6.jpg") no-repeat center top / cover;}
#naviArea li#navi7 {background: url("../../img/cast/drama-photo7.jpg") no-repeat center top / cover;}
#naviArea li#navi8 {background: url("../../img/cast/drama-photo8.jpg") no-repeat center top / cover;}
#naviArea li#navi9 {background: url("../../img/cast/drama-photo9.jpg") no-repeat center top / cover;}
#naviArea li#navi10 {background: url("../../img/cast/drama-photo10.jpg") no-repeat center top / cover;}
#naviArea li#navi11 {background: url("../../img/cast/drama-photo11.jpg") no-repeat center top / cover;}
#naviArea li#navi12 {background: url("../../img/cast/drama-photo12.jpg") no-repeat center top / cover;}
#naviArea li#navi13 {background: url("../../img/cast/drama-photo13.jpg") no-repeat center top / cover;}
#naviArea li#navi14 {background: url("../../img/cast/drama-photo14.jpg") no-repeat center top / cover;}
#naviArea li#navi15 {background: url("../../img/cast/drama-photo15.jpg") no-repeat center top / cover;}
#naviArea li#navi16 {background: url("../../img/cast/drama-photo16.jpg") no-repeat center top / cover;}
#naviArea li#navi17 {background: url("../../img/cast/drama-photo17b.jpg") no-repeat center top / cover;}
#naviArea li#navi18 {background: url("../../img/cast/drama-photo18.jpg") no-repeat center top / cover;}
#naviArea li#navi19 {background: url("../../img/cast/drama-photo19.jpg") no-repeat center top / cover;}
#naviArea li a {
	text-indent: -99999px;
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
}
.naviActive{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background:rgba(204,0,0,0.3);
	border: #cc0000 1px solid;
	box-sizing: border-box;
	display:none;
}
/*------------------------------------------------------------------------------
								SP
------------------------------------------------------------------------------*/
@media screen and (max-width: 1000px) {
#cast {
	width: 100%;
	background: url("../../img/cast/bg-sp.jpg") no-repeat center top / cover;
	padding: 8vw 0 10vw;
}
.cast-box {
	min-height: auto;
}
.left-box {
	width: 100%;
	height: 120vw;
	min-height: auto;
	position: relative;
	float: none;
}
.left-box li div .txt-box p {
	bottom: 3vw;
	left: 3vw;
	font-size: 3.5vw;
}
.left-box li#cast-photo1 {display: block;}
#cast-photo1 div {background: url("../../img/cast/drama-photo1b.jpg") no-repeat center top / auto 120vw;}
#cast-photo2 div {background: url("../../img/cast/drama-photo2.jpg") no-repeat center top / auto 120vw;}
#cast-photo3 div {background: url("../../img/cast/drama-photo3.jpg") no-repeat center top / auto 120vw;}
#cast-photo4 div {background: url("../../img/cast/drama-photo4.jpg") no-repeat center top / auto 120vw;}
#cast-photo5 div {background: url("../../img/cast/drama-photo5.jpg") no-repeat center top / auto 120vw;}
#cast-photo6 div {background: url("../../img/cast/drama-photo6.jpg") no-repeat center top / auto 120vw;}
#cast-photo7 div {background: url("../../img/cast/drama-photo7.jpg") no-repeat center top / auto 120vw;}
#cast-photo8 div {background: url("../../img/cast/drama-photo8.jpg") no-repeat center top / auto 120vw;}
#cast-photo9 div {background: url("../../img/cast/drama-photo9.jpg") no-repeat center top / auto 120vw;}
#cast-photo10 div {background: url("../../img/cast/drama-photo10.jpg") no-repeat center top / auto 120vw;}
#cast-photo11 div {background: url("../../img/cast/drama-photo11.jpg") no-repeat center top / auto 120vw;}
#cast-photo12 div {background: url("../../img/cast/drama-photo12.jpg") no-repeat center top / auto 120vw;}
#cast-photo13 div {background: url("../../img/cast/drama-photo13.jpg") no-repeat center top / auto 120vw;}
#cast-photo14 div {background: url("../../img/cast/drama-photo14.jpg") no-repeat center top / auto 120vw;}
#cast-photo15 div {background: url("../../img/cast/drama-photo15.jpg") no-repeat center top / auto 120vw;}
#cast-photo16 div {background: url("../../img/cast/drama-photo16.jpg") no-repeat center top / auto 120vw;}
#cast-photo17 div {background: url("../../img/cast/drama-photo17b.jpg") no-repeat center top / auto 120vw;}
#cast-photo18 div {background: url("../../img/cast/drama-photo18.jpg") no-repeat center top / auto 120vw;}
#cast-photo19 div {background: url("../../img/cast/drama-photo19.jpg") no-repeat center top / auto 120vw;}
.right-box {
	width: 100%;
	height: auto;
	min-height: auto;
	float: none;
}
.right-box li.absolute {
	position: relative;
	padding-left: 0%;
	margin-top: 5vw;
}
.right-box .chara .name h3 {
	font-size: 8vw;
}
.right-box .chara .name h3 span {
	bottom:-4vw;
	left:46vw;
	font-size: 2.5vw;
}
.right-box .chara .name h4 {
	font-size: 6vw;
	margin-top: 5vw;
}
.right-box .chara .name h5 {
	font-size: 5vw;
	margin-top: -1vw;
}
.right-box .txt-area h6 {
	font-size: 4vw;
	margin-top: 3vw;
}
.right-box .txt-area p {
	font-size: 3vw;
	line-height: 1.7em;
	margin-top: 2vw;
}
.arrow {
	top:125vw;
}

#naviArea {
	width: 100%;
	margin: 6vw auto 0!important;
}
#naviArea {
	width: 100%;
	padding-top: 0px;
	height: auto;
	overflow: hidden;
	position: relative;
}
#naviArea li {
	height: 20%;
	margin-right: 0.5%;
	position: relative;
	float: left;
	margin-bottom: 0.5%;
	padding-top: 15.333%;
	width: 19.6%!important;
}
#naviArea li:nth-child(4),#naviArea li:nth-child(9),#naviArea li:nth-child(14),#naviArea li:nth-child(19) {
	margin-right: 0px;
}
#naviArea li#navi1 {
	top:auto;
	left:auto;
	width: 34.3%!important;
}
#naviArea li#navi2 {
	top:auto;
	left:auto;
	width: 25%!important;
}
#naviArea li#navi3 {
	top:auto;
	left:auto;
}
#naviArea li#navi4 {
	top:auto;
	left:auto;
}
#naviArea li#navi5 {
	top:auto;
	left:auto;
}
#naviArea li#navi6 {
	top:auto;
	left:auto;
}
#naviArea li#navi7 {
	top:auto;
	left:auto;
}
#naviArea li#navi8 {
	top:auto;
	left:auto;
}
#naviArea li#navi9 {
	top:auto;
	left:auto;
}
#naviArea li#navi10 {
	top:auto;
	left:auto;
}
#naviArea li#navi11 {
	top:auto;
	left:auto;
}
#naviArea li#navi12 {
	top:auto;
	left:auto;
}
#naviArea li#navi13 {
	top:auto;
	left:auto;
}
#naviArea li#navi14 {
	top:auto;
	left:auto;
}
#naviArea li#navi15 {
	top:auto;
	left:auto;
}
#naviArea li#navi16 {
	top:auto;
	left:auto;
}
#naviArea li#navi17 {
	top:auto;
	left:auto;
}
#naviArea li#navi18 {
	top:auto;
	left:auto;
}
#naviArea li#navi19 {
	top:auto;
	left:auto;
}
#naviArea li#navi1 {background: url("../../img/cast/drama-photo1.jpg") no-repeat center top 20% / cover;}
#naviArea li#navi2 {background: url("../../img/cast/drama-photo2.jpg") no-repeat center top 20% / cover;}
#naviArea li#navi3 {background: url("../../img/cast/drama-photo3.jpg") no-repeat center top / cover;}
#naviArea li#navi4 {background: url("../../img/cast/drama-photo4.jpg") no-repeat center top / cover;}
#naviArea li#navi5 {background: url("../../img/cast/drama-photo5.jpg") no-repeat center top / cover;}
#naviArea li#navi6 {background: url("../../img/cast/drama-photo6.jpg") no-repeat center top / cover;}
#naviArea li#navi7 {background: url("../../img/cast/drama-photo7.jpg") no-repeat center top / cover;}
#naviArea li#navi8 {background: url("../../img/cast/drama-photo8.jpg") no-repeat center top / cover;}
#naviArea li#navi9 {background: url("../../img/cast/drama-photo9.jpg") no-repeat center top / cover;}
#naviArea li#navi10 {background: url("../../img/cast/drama-photo10.jpg") no-repeat center top / cover;}
#naviArea li#navi11 {background: url("../../img/cast/drama-photo11.jpg") no-repeat center top / cover;}
#naviArea li#navi12 {background: url("../../img/cast/drama-photo12.jpg") no-repeat center top / cover;}
#naviArea li#navi13 {background: url("../../img/cast/drama-photo13.jpg") no-repeat center top / cover;}
#naviArea li#navi14 {background: url("../../img/cast/drama-photo14.jpg") no-repeat center top / cover;}
#naviArea li#navi15 {background: url("../../img/cast/drama-photo15.jpg") no-repeat center top / cover;}
#naviArea li#navi16 {background: url("../../img/cast/drama-photo16.jpg") no-repeat center top / cover;}
#naviArea li#navi17 {background: url("../../img/cast/drama-photo17b.jpg") no-repeat center top / cover;}
#naviArea li#navi18 {background: url("../../img/cast/drama-photo18.jpg") no-repeat center top / cover;}
#naviArea li#navi19 {background: url("../../img/cast/drama-photo19.jpg") no-repeat center top / cover;}
#naviArea li a {
	text-indent: -99999px;
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
}
.naviActive{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background:rgba(204,0,0,0.3);
	border: #cc0000 2px solid;
	box-sizing: border-box;
	display:none;
}
}

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