/*------------------------------------------------------------------------------
								共通
------------------------------------------------------------------------------*/
section.scrollpoint {
	margin-top: -120px;
	padding-top: 120px;
	position: relative;
}
#contents-wrapper {
	padding-bottom:310px;
}
.main-bnr-area {
	position: relative;
	margin: 0 auto;
	text-align: center;
	font-size: 0px;
	line-height: 0px;
}
.main-bnr-area.bnr1 {
	width: 500px;
}
.main-bnr-area.bnr2 {
	width: 920px;
}
.main-bnr-area.bnr3 {
	width: 1200px;
}
.main-bnr-area.bnr4 {
	width: 820px;
}
.main-bnr-area.bnr5 {
	width: 1200px;
}
.main-bnr-area li {
	display: inline-block;
	margin: 0 1%;
	box-sizing: border-box;
}
.main-bnr-area.bnr1 li {
	width: 98%;
}
.main-bnr-area li:nth-last-child() {
	margin-bottom: 0px!important;
}
.main-bnr-area.bnr2 li {
	width: 48%;
}
.main-bnr-area.bnr3 li {
	width: 31.333%;
}
.main-bnr-area.bnr4 li {
	width: 48%;
}

.bnr-area {
	position: relative;
	margin: 0 auto;
	font-size: 0px;
}
.bnr-area.bnr1 {
	width: 300px;
}
.bnr-area.bnr2 {
	width: 630px;
}
.bnr-area.bnr3 {
	width: 1080px;
}
.bnr-area.bnr4 {
	width: 100%;
	max-width: 1440px;
	padding: 0 40px;
	box-sizing: border-box;
}
.bnr-area.bnr1 li {
	width: 99%;
	display: inline-block;
	margin: 0 0.5%;
	box-sizing: border-box;
}
.bnr-area.bnr2 li {
	width: 48%;
	display: inline-block;
	margin: 0 1%;
	box-sizing: border-box;
}
.bnr-area.bnr3 li {
	width: 32.333%;
	display: inline-block;
	margin: 0 0.5%;
	box-sizing: border-box;
}
.bnr-area.bnr4 li {
	width: 24%;
	display: inline-block;
	margin: 0 0.5%;
	box-sizing: border-box;
}

/*------------------------------------------------------------------------------
								BG MOVIE
------------------------------------------------------------------------------*/
#bgmovie-wrapper {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #000000;
}
#bgmovie {
	max-width: none;
	/*天地中央配置*/
	position: absolute;
	top: 0px;
	left: 0px;
	/*縦横幅指定*/
	width: 100%;
	height: 100%;
	min-height: 100%;
	min-width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}
#bgmovie-player {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000000;
}
#bgmovie-thum {
	position: absolute;
	top: 50% !important;
	height: 200% !important;
	background: #000000;
	transform: translateY(-50%);
}
#bgmovie-thum-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#bgmovie-container {
	flex-grow: 1;
	display: flex;
	align-items: center;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}
#bgmovie-player-container {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	height: 100vh;
	min-height: 56vw;
	max-height: 56vw;
	overflow: hidden;
	width: 100%;
}

#bgmovie-player-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*------------------------------------------------------------------------------
								MAIN
------------------------------------------------------------------------------*/
#main-area {
	position: relative;
	width: 100%;
	padding:0;
	height: 100vh;
	min-height: calc(56vw + 80px);
	max-height: calc(56vw + 80px);
	margin: 0 auto;
	background: #122040;
	box-sizing: border-box;
	padding-top: 80px;
}

#main-area .ami {
	position: absolute;
	top:0px;
	left:0px;
	width: 100%;
	height: 100%;
	background: url("../../img/common/ami.png") repeat left top fixed;
	overflow: hidden;
}
#main-area h1 {
	position: absolute;
	left: 0px;
	top: 0px;
	height: 0px;
	text-indent: -99999px;
}
#main-area .main-box {
	width: 100%;
	height: 100%;
	position: relative;
	top: 0px;
	left: 0px;
	overflow: hidden;
}
#main-area .logo-area {
	position: absolute;
	top: -1vw;
	left: 1vw;
	width: 26.4vw;
	height: 9.6vw;
	line-height: 0px;
}
#main-area .logo-area li {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
#main-area .logo-area .logo {
	background: url("../../img/common/logo.png?ver1") no-repeat center center / contain;
	text-indent: -99999px;
}

#main-area .day {
	position: absolute;
	bottom: 1.3vw;
	right: 2vw;
	width: auto;
	color: #FFFFFF;
	text-align: center;
	font-size: 3.5vw;
	font-family: "Teko", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	line-height: 0.8em;
}
#main-area .day span {
	font-size: 2.6vw;
}

@media screen and (max-width: 1280px) {

#bgmovie-player-container {
	min-height: 716.8px;
	max-height: 716.8px;
}

#main-area {
	min-height: 796.8px;
	max-height: 796.8px;
}
#main-area .logo-area {
	width: 337.92px;
	height: 122.88px;
}

#main-area .day {
	bottom: 16.64px;
	right: 25.6px;
	font-size: 44.8px;
}
#main-area .day span {
	font-size: 33.28px;
}
	
}

/*------------------------------------------------------------------------------
								ANIMATION
------------------------------------------------------------------------------*/
.topMainLogoOut {
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	opacity: 0.0;
}
.topMainLogoIn {
	-webkit-transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1);
	transition:         all 1.5s cubic-bezier(0.25, 1, 0.5, 1);
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
	opacity: 1.0;
}
.fromBottomOut {
	transform: translate(0,40px);
	opacity: 0.0;
}
.fromBottomIn {
	-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	transform: translate(0,0);
	opacity: 1.0;
}
.scaleUpOut {
	-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	transform: scale(0.8,0.8);
	opacity: 0.0;
}
.scaleUpIn {
	-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
	transform: scale(1.0,1.0);
	opacity: 1.0;
}
.alphaOut {
	opacity: 0.0;
}
.alphaIn {
	-webkit-transition: all 2.0s cubic-bezier(0.25, 1, 0.5, 1);
	transition:         all 2.0s cubic-bezier(0.25, 1, 0.5, 1);
	opacity: 1.0;
}
.fix {
	-webkit-transition: none;
	transition:         none;
	transform: translate(0,0) scale(1.0);
	opacity: 1.0;
}

/*------------------------------------------------------------------------------
								MIDDLE
------------------------------------------------------------------------------*/
#middle-area {
	background: #FFFFFF;
}
#middle-area .billing h3 {
	color: #014099;
	font-size: 20px;
	text-align: center;
	line-height: 1em;
	margin-bottom: 30px;
	font-weight: 800;
}
#middle-area .billing h3 span{
	margin-right: 1em;
}
#middle-area .billing h4 {
	color: #014099;
	font-size: 18px;
	text-align: center;
	line-height: 1em;
	margin-bottom: 25px;
	font-weight: 800;
}
#middle-area .billing h4 span{
	margin-right: 0px;
	text-indent: 1em;
	display: block;
	margin-bottom: 15px;
}
#middle-area .billing p {
	color: #014099;
	text-align: center;
	font-size: 14px;
	line-height: 1em;
	font-weight: 800;
	position: relative;
}
#middle-area .billing p .toho {
	position: relative;
	display: inline-block;
	width: 4.8em;
	height: 20px;
	top: -0.1em;
	text-indent: -99999px;
	background: url("../../img/middle/billing-toho.png") no-repeat left center / contain;
}
/*------------------------------------------------------------------------------
								SNS
------------------------------------------------------------------------------*/
.sns-link {
	width: 620px;
	margin: 0 auto 0;
	position: relative;
	overflow: hidden;
}
.sns-link li {
	width: 200px;
	margin-right: 0px;
	margin-right: 10px;
	padding-left: 54px;
	padding-right: 36px;
	padding-top: 3px;
	float: left;
	text-align: center;
	font-weight: 400;
	line-height: 57px;
	height:60px; 
	box-sizing: border-box;
	font-size: 21px;
	position: relative;
	color: #003377;
	border: 1px solid #003377;
	font-family: "Teko", sans-serif;
	font-optical-sizing: auto;
}
.sns-link li::after {
	content: "";
	position: absolute;
	width: 30px;
	height: 60px;
	top: 0px;
	right: 0px;
	background: url("../../img/common/arrow-right.png") no-repeat center center / 10px auto;
}
.sns-link li:last-child {
	margin-right: 0px;
}
.sns-link #sns-link1 {
	background: url("../../img/common/share-btn-blue.png") no-repeat left 10px top -30px / 40px;
}
.sns-link #sns-link2 {
	background: url("../../img/common/share-btn-blue.png") no-repeat left 10px top 10px / 40px;
}
.sns-link #sns-link3 {
	background: url("../../img/common/share-btn-blue.png") no-repeat left 10px top -70px / 40px;
}
.sns-link li a {
	position:absolute;
	width:100%;
	height:100%;
	text-indent:-999999px;
	top:0px;
	left:0px;
}

/*------------------------------------------------------------------------------
								TRAILER
------------------------------------------------------------------------------*/
#movie-area {
    position: relative;
}
#movie-area .content {
	position: relative;
	height: 100%;
	width: 100%;
}
#movie-area .content::before {
	content: "";
    position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: #CCCCCC;
	mix-blend-mode: color-burn;
	transform: translate3d(0,0,0);
	opacity: 0.8;
	z-index: 0;
}
#movie-area .content::after {
	content: "";
    position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.05);
	transform: translate3d(0,0,0);
	z-index: 0;
}
#movie-area .bg {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url("../../img/trailer/trailer-bg.png") no-repeat center top 80% / 1600px auto;
}
#trailer-area {
	width:100%;
	margin:0 auto 0;
	position: relative;
	z-index: 1;
}
#trailer-area .prArea {  
	margin: 0 auto 0 auto;
	color: #000;
	font-size: 16px;
	line-height: 1.6em;
	width:100%;
	box-sizing: border-box;
	max-width: 920px;
	padding:0;
}
#trailer-area .video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin:0;
	background:#000000;
}
#trailer-area .video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*------------------------------------------------------------------------------
								VISUAL
------------------------------------------------------------------------------*/
#visual-area {
    position: relative;
}
#visual-area .content {
	position: relative;
	height: 100%;
	width: 100%;
}
#visual-area .visual-main {
	width: 100%;
	height: 680px;
	/*background: rgba(255,255,255,0.3);*/
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.3), rgba(255,255,255,0.5), rgba(255,255,255,0.3), rgba(255,255,255,0));
	box-sizing: border-box;
	overflow-x: hidden;
	position: relative;
}
#visual-area .visual-main #visual-slyder {
	position: absolute;
	top: 40px;
	left: 50%;
	overflow: hidden;
	height: 600px;
	width: 13020px;
	-webkit-transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
	transition:         all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

#visual-area .visual-main #visual-slyder li {
	width: 420px;
	height: 100%;
	float: left;
	margin-right: 40px;
}
#visual-area .visual-main #visual-slyder li:nth-child(2) {
	width: 600px;
	height: 100%;
}

#visual-area #visual-action.visual-point1 .visual-main #visual-slyder {margin-left: -210px;}
#visual-area #visual-action.visual-point2 .visual-main #visual-slyder {margin-left: -760px;}
#visual-area #visual-action.visual-point3 .visual-main #visual-slyder {margin-left: -1310px;}
#visual-area #visual-action.visual-point4 .visual-main #visual-slyder {margin-left: -1770px;}
#visual-area #visual-action.visual-point5 .visual-main #visual-slyder {margin-left: -2230px;}
#visual-area #visual-action.visual-point6 .visual-main #visual-slyder {margin-left: -2690px;}
#visual-area #visual-action.visual-point7 .visual-main #visual-slyder {margin-left: -3150px;}
#visual-area #visual-action.visual-point8 .visual-main #visual-slyder {margin-left: -3610px;}
#visual-area #visual-action.visual-point9 .visual-main #visual-slyder {margin-left: -4070px;}
#visual-area #visual-action.visual-point10 .visual-main #visual-slyder {margin-left: -4530px;}
#visual-area #visual-action.visual-point11 .visual-main #visual-slyder {margin-left: -4990px;}
#visual-area #visual-action.visual-point12 .visual-main #visual-slyder {margin-left: -5450px;}
#visual-area #visual-action.visual-point13 .visual-main #visual-slyder {margin-left: -5910px;}
#visual-area #visual-action.visual-point14 .visual-main #visual-slyder {margin-left: -6370px;}
#visual-area #visual-action.visual-point15 .visual-main #visual-slyder {margin-left: -6830px;}
#visual-area #visual-action.visual-point16 .visual-main #visual-slyder {margin-left: -7290px;}
#visual-area #visual-action.visual-point17 .visual-main #visual-slyder {margin-left: -7750px;}
#visual-area #visual-action.visual-point18 .visual-main #visual-slyder {margin-left: -8210px;}
#visual-area #visual-action.visual-point19 .visual-main #visual-slyder {margin-left: -8670px;}
#visual-area #visual-action.visual-point20 .visual-main #visual-slyder {margin-left: -9130px;}
#visual-area #visual-action.visual-point21 .visual-main #visual-slyder {margin-left: -9590px;}
#visual-area #visual-action.visual-point22 .visual-main #visual-slyder {margin-left: -10050px;}
#visual-area #visual-action.visual-point23 .visual-main #visual-slyder {margin-left: -10510px;}
#visual-area #visual-action.visual-point24 .visual-main #visual-slyder {margin-left: -10970px;}
#visual-area #visual-action.visual-point25 .visual-main #visual-slyder {margin-left: -11430px;}
#visual-area #visual-action.visual-point26 .visual-main #visual-slyder {margin-left: -11890px;}
#visual-area #visual-action.visual-point27 .visual-main #visual-slyder {margin-left: -12350px;}
#visual-area #visual-action.visual-point28 .visual-main #visual-slyder {margin-left: -12810px;}

#visual-area .visual-main #visual-slyder .visual {
	-webkit-transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
	transition:         all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
	opacity: 1;
}
#visual-area #visual-action.visual-point1 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point2 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point3 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point4 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point5 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point6 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point7 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point8 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point9 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point10 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point11 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point12 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point13 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point14 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point15 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point16 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point17 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point18 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point19 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point20 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point21 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point22 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point23 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point24 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point25 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point26 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point27 .visual-main #visual-slyder .visual {opacity: 0.3;}
#visual-area #visual-action.visual-point28 .visual-main #visual-slyder .visual {opacity: 0.3;}

#visual-area #visual-action.visual-point1 .visual-main #visual-slyder .visual1 {opacity: 1;}
#visual-area #visual-action.visual-point2 .visual-main #visual-slyder .visual2 {opacity: 1;}
#visual-area #visual-action.visual-point3 .visual-main #visual-slyder .visual3-1 {opacity: 1;}
#visual-area #visual-action.visual-point4 .visual-main #visual-slyder .visual3-2 {opacity: 1;}
#visual-area #visual-action.visual-point5 .visual-main #visual-slyder .visual3-3 {opacity: 1;}
#visual-area #visual-action.visual-point6 .visual-main #visual-slyder .visual3-4 {opacity: 1;}
#visual-area #visual-action.visual-point7 .visual-main #visual-slyder .visual3-5 {opacity: 1;}
#visual-area #visual-action.visual-point8 .visual-main #visual-slyder .visual3-6 {opacity: 1;}
#visual-area #visual-action.visual-point9 .visual-main #visual-slyder .visual3-7 {opacity: 1;}
#visual-area #visual-action.visual-point10 .visual-main #visual-slyder .visual3-8 {opacity: 1;}
#visual-area #visual-action.visual-point11 .visual-main #visual-slyder .visual3-9 {opacity: 1;}
#visual-area #visual-action.visual-point12 .visual-main #visual-slyder .visual3-10 {opacity: 1;}
#visual-area #visual-action.visual-point13 .visual-main #visual-slyder .visual3-11 {opacity: 1;}
#visual-area #visual-action.visual-point14 .visual-main #visual-slyder .visual3-12 {opacity: 1;}
#visual-area #visual-action.visual-point15 .visual-main #visual-slyder .visual3-13 {opacity: 1;}
#visual-area #visual-action.visual-point16 .visual-main #visual-slyder .visual4-1 {opacity: 1;}
#visual-area #visual-action.visual-point17 .visual-main #visual-slyder .visual4-2 {opacity: 1;}
#visual-area #visual-action.visual-point18 .visual-main #visual-slyder .visual4-3 {opacity: 1;}
#visual-area #visual-action.visual-point19 .visual-main #visual-slyder .visual4-4 {opacity: 1;}
#visual-area #visual-action.visual-point20 .visual-main #visual-slyder .visual4-5 {opacity: 1;}
#visual-area #visual-action.visual-point21 .visual-main #visual-slyder .visual4-6 {opacity: 1;}
#visual-area #visual-action.visual-point22 .visual-main #visual-slyder .visual4-7 {opacity: 1;}
#visual-area #visual-action.visual-point23 .visual-main #visual-slyder .visual4-8 {opacity: 1;}
#visual-area #visual-action.visual-point24 .visual-main #visual-slyder .visual4-9 {opacity: 1;}
#visual-area #visual-action.visual-point25 .visual-main #visual-slyder .visual4-10 {opacity: 1;}
#visual-area #visual-action.visual-point26 .visual-main #visual-slyder .visual4-11 {opacity: 1;}
#visual-area #visual-action.visual-point27 .visual-main #visual-slyder .visual4-12 {opacity: 1;}
#visual-area #visual-action.visual-point28 .visual-main #visual-slyder .visual4-13 {opacity: 1;}

#visual-area .visual-main #visual-slyder li.visual1 {background: url("../../img/visual/img1.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual2 {background: url("../../img/visual/img2.jpg?ver1") no-repeat center center / contain;}
#visual-area .visual-main #visual-slyder li.visual3-1 {background: url("../../img/visual/img3-1.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual3-2 {background: url("../../img/visual/img3-2.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual3-3 {background: url("../../img/visual/img3-3.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual3-4 {background: url("../../img/visual/img3-4.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual3-5 {background: url("../../img/visual/img3-5.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual3-6 {background: url("../../img/visual/img3-6.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual3-7 {background: url("../../img/visual/img3-7.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual3-8 {background: url("../../img/visual/img3-8.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual3-9 {background: url("../../img/visual/img3-9.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual3-10 {background: url("../../img/visual/img3-10.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual3-11 {background: url("../../img/visual/img3-11.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual3-12 {background: url("../../img/visual/img3-12.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual3-13 {background: url("../../img/visual/img3-13.jpg?ver3") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual4-1 {background: url("../../img/visual/img4-1.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual4-2 {background: url("../../img/visual/img4-2.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual4-3 {background: url("../../img/visual/img4-3.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual4-4 {background: url("../../img/visual/img4-4.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual4-5 {background: url("../../img/visual/img4-5.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual4-6 {background: url("../../img/visual/img4-6.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual4-7 {background: url("../../img/visual/img4-7.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual4-8 {background: url("../../img/visual/img4-8.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual4-9 {background: url("../../img/visual/img4-9.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual4-10 {background: url("../../img/visual/img4-10.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual4-11 {background: url("../../img/visual/img4-11.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual4-12 {background: url("../../img/visual/img4-12.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li.visual4-13 {background: url("../../img/visual/img4-13.jpg") no-repeat center center / cover;}
#visual-area .visual-main #visual-slyder li:last-child {
	margin-right: 0px;
}
#visual-area .visual-navi {
	width: 1160px;
	overflow: hidden;
	margin: 0 auto;
	padding: 0 60px;
	position: relative;
}
#visual-area .visual-navi .navi1,#visual-area .visual-navi .navi2,#visual-area .visual-navi .navi3,#visual-area .visual-navi .navi4 {
	float: left;
}
#visual-area .visual-navi .navi {
	position: relative;
}
#visual-area .visual-navi .navi a {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	text-indent: -99999px;
}
#visual-area .visual-navi .navi span {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #003377;
	mix-blend-mode: hard-light;
}
#visual-area #visual-action.visual-point1 .visual-navi .navi span.navi-a1 {opacity: 0.5;}
#visual-area #visual-action.visual-point2 .visual-navi .navi span.navi-a2 {opacity: 0.5;}
#visual-area #visual-action.visual-point3 .visual-navi .navi span.navi-a3 {opacity: 0.5;}
#visual-area #visual-action.visual-point4 .visual-navi .navi span.navi-a4 {opacity: 0.5;}
#visual-area #visual-action.visual-point5 .visual-navi .navi span.navi-a5 {opacity: 0.5;}
#visual-area #visual-action.visual-point6 .visual-navi .navi span.navi-a6 {opacity: 0.5;}
#visual-area #visual-action.visual-point7 .visual-navi .navi span.navi-a7 {opacity: 0.5;}
#visual-area #visual-action.visual-point8 .visual-navi .navi span.navi-a8 {opacity: 0.5;}
#visual-area #visual-action.visual-point9 .visual-navi .navi span.navi-a9 {opacity: 0.5;}
#visual-area #visual-action.visual-point10 .visual-navi .navi span.navi-a10 {opacity: 0.5;}
#visual-area #visual-action.visual-point11 .visual-navi .navi span.navi-a11 {opacity: 0.5;}
#visual-area #visual-action.visual-point12 .visual-navi .navi span.navi-a12 {opacity: 0.5;}
#visual-area #visual-action.visual-point13 .visual-navi .navi span.navi-a13 {opacity: 0.5;}
#visual-area #visual-action.visual-point14 .visual-navi .navi span.navi-a14 {opacity: 0.5;}
#visual-area #visual-action.visual-point15 .visual-navi .navi span.navi-a15 {opacity: 0.5;}
#visual-area #visual-action.visual-point16 .visual-navi .navi span.navi-a16 {opacity: 0.5;}
#visual-area #visual-action.visual-point17 .visual-navi .navi span.navi-a17 {opacity: 0.5;}
#visual-area #visual-action.visual-point18 .visual-navi .navi span.navi-a18 {opacity: 0.5;}
#visual-area #visual-action.visual-point19 .visual-navi .navi span.navi-a19 {opacity: 0.5;}
#visual-area #visual-action.visual-point20 .visual-navi .navi span.navi-a20 {opacity: 0.5;}
#visual-area #visual-action.visual-point21 .visual-navi .navi span.navi-a21 {opacity: 0.5;}
#visual-area #visual-action.visual-point22 .visual-navi .navi span.navi-a22 {opacity: 0.5;}
#visual-area #visual-action.visual-point23 .visual-navi .navi span.navi-a23 {opacity: 0.5;}
#visual-area #visual-action.visual-point24 .visual-navi .navi span.navi-a24 {opacity: 0.5;}
#visual-area #visual-action.visual-point25 .visual-navi .navi span.navi-a25 {opacity: 0.5;}
#visual-area #visual-action.visual-point26 .visual-navi .navi span.navi-a26 {opacity: 0.5;}
#visual-area #visual-action.visual-point27 .visual-navi .navi span.navi-a27 {opacity: 0.5;}
#visual-area #visual-action.visual-point28 .visual-navi .navi span.navi-a28 {opacity: 0.5;}

#visual-area .visual-navi .navi.act span {
	opacity: 0.5;
}
#visual-area .visual-navi .navi span {
	-webkit-transition: all 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
	opacity: 0.0;
}
#visual-area .visual-navi .navi:hover span {
	-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);
	opacity: 0.5;
}

#visual-area .visual-navi .navi1 {
	width: 8%;
	padding-top: 12.9%;
	background: url("../../img/visual/img1.jpg") no-repeat center center / cover;
	margin-right: 1.4%;
	margin-left: 3.3%;
}
#visual-area .visual-navi .navi2 {
	width: 13.4%;
	padding-top: 8.1%;
	margin-top: 2.4%;
	margin-bottom: 2.4%;
	background: url("../../img/visual/img2.jpg") no-repeat center center / contain;
	margin-right: 1.4%
}
#visual-area .visual-navi .navi3 {
	width: 33.8%;
	height: 12.9%;
	margin-right: 1.4%;
	position: relative;
	overflow: hidden;
}
#visual-area .visual-navi .navi4 {
	width: 33.8%;
	height: 12.9%;
	position: relative;
	overflow: hidden;
}
#visual-area .visual-navi .navi3 li,#visual-area .visual-navi .navi4 li {
	float: left;
	width: 13.01775148%;
	padding-top: 18.34319527%;
	margin-right: 1.47928994%;
	margin-bottom: 1.47928994%;
}
#visual-area .visual-navi .navi3 li:nth-child(7n),#visual-area .visual-navi .navi4 li:nth-child(7n) {
	margin-right: 0;
}
#visual-area .visual-navi .navi3-1 {background: url("../../img/visual/img3-1.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi3-2 {background: url("../../img/visual/img3-2.jpg?ver1") no-repeat center center / cover;}
#visual-area .visual-navi .navi3-3 {background: url("../../img/visual/img3-3.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi3-4 {background: url("../../img/visual/img3-4.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi3-5 {background: url("../../img/visual/img3-5.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi3-6 {background: url("../../img/visual/img3-6.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi3-7 {background: url("../../img/visual/img3-7.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi3-8 {background: url("../../img/visual/img3-8.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi3-9 {background: url("../../img/visual/img3-9.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi3-10 {background: url("../../img/visual/img3-10.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi3-11 {background: url("../../img/visual/img3-11.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi3-12 {background: url("../../img/visual/img3-12.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi3-13 {background: url("../../img/visual/img3-13.jpg?ver3") no-repeat center center / cover;}
#visual-area .visual-navi .navi4-1 {background: url("../../img/visual/img4-1.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi4-2 {background: url("../../img/visual/img4-2.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi4-3 {background: url("../../img/visual/img4-3.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi4-4 {background: url("../../img/visual/img4-4.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi4-5 {background: url("../../img/visual/img4-5.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi4-6 {background: url("../../img/visual/img4-6.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi4-7 {background: url("../../img/visual/img4-7.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi4-8 {background: url("../../img/visual/img4-8.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi4-9 {background: url("../../img/visual/img4-9.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi4-10 {background: url("../../img/visual/img4-10.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi4-11 {background: url("../../img/visual/img4-11.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi4-12 {background: url("../../img/visual/img4-12.jpg") no-repeat center center / cover;}
#visual-area .visual-navi .navi4-13 {background: url("../../img/visual/img4-13.jpg") no-repeat center center / cover;}

#visual-area .visual-navi .navi-left {
	-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);
	position: absolute;
	width: 30px;
	height: 60px;
	top: 50%;
	left: 40px;
	margin-top: -30px;
	transform: rotate(180deg);
	background: url("../../img/common/arrow-right.png") no-repeat center center / contain;
}
#visual-area .visual-navi .navi-right {
	-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);
	position: absolute;
	width: 30px;
	height: 60px;
	top: 50%;
	right: 40px;
	margin-top: -30px;
	background: url("../../img/common/arrow-right.png") no-repeat center center / contain;
}

#visual-area #visual-action.visual-point1 .visual-navi .navi-left {opacity: 0.3;}
#visual-area #visual-action.visual-point28 .visual-navi .navi-right {opacity: 0.3;}

/*------------------------------------------------------------------------------
								STORY
------------------------------------------------------------------------------*/
#story-area {
    position: relative;
}
#story-area .content {
	position: relative;
	height: 100%;
	width: 100%;
}
#story-area .content::before {
	content: "";
    position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: linear-gradient(to bottom, #002255, #003377, #002255);
	mix-blend-mode: color-burn;
	transform: translate3d(0,0,0) skewY(-2deg);
	opacity: 0.8;
	z-index: 0;
}
#story-area .content::after {
	content: "";
    position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
    transform: skewY(-2deg);
	background: linear-gradient(to bottom, #002255, #003377, #002255);
	opacity: 0.7;
	z-index: 0;
}
#story-area h2 {
	color: #FFFFFF;
}
.story-box {
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	z-index: 1;
}
.story-box p {
	font-size: 20px;
	text-align: center;
	line-height: 2.2em;
	color: #FFFFFF;
}

/*------------------------------------------------------------------------------
								CASTS
------------------------------------------------------------------------------*/
#cast-area {
    position: relative;
}
#cast-area .content {
	position: relative;
	height: 100%;
	width: 100%;
}
.cast-box {
	width: 800px;
	height: auto;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
}
.cast-box ul.cast {
	position: relative;
	overflow: hidden;
}
.cast-box ul.cast li {
	float: left;
	width: 25%;
	margin-top: 60px;
	position: relative;
}
.cast-box ul.cast li:first-child {
	margin-top: 0px;
	width: 100%;
}
.cast-box ul.cast li:last-child::after {
	content: "";
	position: absolute;
	width: 2px;
	height: 90%;
	left: 0px;
	top: 0px;
	margin-top: 5px;
	background: #666666;
	transform: rotate(30deg)
}
.cast-box ul.cast li p {
	text-align: center;
	font-size: 24px;
	line-height: 1em;
	font-weight: 700;
}
.cast-box ul.cast li p span {
	display: block;
	font-size: 18px;
	font-weight: 600;
	color: #003377;
	line-height: 1em;
	margin-bottom: 20px;
}

/*------------------------------------------------------------------------------
								COMMENT
------------------------------------------------------------------------------*/
#comment-area {
    position: relative;
}
#comment-area .content {
	position: relative;
	height: 100%;
	width: 100%;
}
#comment-area .content::before {
	content: "";
    position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: #CCCCCC;
	mix-blend-mode: color-burn;
	transform: translate3d(0,0,0);
	opacity: 0.5;
	z-index: 0;
}
#comment-area .content::after {
	content: "";
    position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.05);
	transform: translate3d(0,0,0);
	z-index: 0;
}
.comment-box {
	width: 1280px;
	height: auto;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 40px;
}
.comment-box ul.comment li {
	box-sizing: border-box;
	padding: 40px;
	background: rgba(255,255,255,0.65);
	margin-top: 40px;
}
.comment-box ul.comment li:first-child {
	margin-top: 0px;
}
.comment-box ul.comment li h3 {
	text-align: center;
	font-size: 26px;
	line-height: 1em;
	font-weight: 700;
	color: #003377;
	margin-bottom: 30px;
}
.comment-box ul.comment li h3 span {
	display: block;
	font-size: 18px;
	font-weight: 600;
	line-height: 1em;
	margin-bottom: 20px;
}
.comment-box ul.comment li p {
	font-size: 18px;
	line-height: 2em;
	margin-top: 1em;
}

/*------------------------------------------------------------------------------
								COMIC
------------------------------------------------------------------------------*/
#comic-area {
    position: relative;
}
#comic-area .content {
	position: relative;
	height: 100%;
	width: 100%;
}
.comic-box {
	width: 1280px;
	height: auto;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 40px;
}

.comic-box .head {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.comic-box .head .left-box {
	float: left;
	width: 520px;
	height: 130px;
}
.comic-box .head .left-box h3 {
	text-indent: -99999px;
	background: url("../../img/comic/tit.png") no-repeat left top / contain;
	width: 100%;
	height: 0px;
	line-height: 0px;
	padding-top: 17%;
}
.comic-box .head .left-box h4 {
	color: #003377;
	font-size: 24px;
	text-align: right;
	font-weight: 800;
	line-height: 1em;
	padding-top: 3%;
}
.comic-box .head .right-box {
	float: right;
	width: 620px;
	height: 130px;
	border-top: 2px solid #003377;
	border-bottom: 2px solid #003377;
	box-sizing: border-box;
	padding-top: 18px;
}
.comic-box .head .right-box p {
	color: #003377;
	font-size: 32px;
	font-family: 'Noto Serif JP', serif;
	font-weight: 800;
	text-align: center;
	line-height: 1.4em;
}
.comic-box .head .right-box p span {
	margin: 0 -0.3em;
	font-size: 0.93em;
}
.comic-box .comic-list {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.comic-box .comic-list li {
	float: left;
	width: 13%;
	margin-right: 1.5%;
	margin-bottom: 1.5%;
	position: relative;
	padding-top: 19.41%;
}
.comic-box .comic-list li.comic1 {background:url("../../img/comic/img1.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic2 {background:url("../../img/comic/img2.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic3 {background:url("../../img/comic/img3.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic4 {background:url("../../img/comic/img4.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic5 {background:url("../../img/comic/img5.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic6 {background:url("../../img/comic/img6.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic7 {background:url("../../img/comic/img7.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic8 {background:url("../../img/comic/img8.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic9 {background:url("../../img/comic/img9.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic10 {background:url("../../img/comic/img10.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic11 {background:url("../../img/comic/img11.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic12 {background:url("../../img/comic/img12.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic13 {background:url("../../img/comic/img13.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic14 {background:url("../../img/comic/img14.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic15 {background:url("../../img/comic/img15.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic16 {background:url("../../img/comic/img16.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic17 {background:url("../../img/comic/img17.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic18 {background:url("../../img/comic/img18.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic19 {background:url("../../img/comic/img19.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic20 {background:url("../../img/comic/img20.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic21 {background:url("../../img/comic/img21.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic22 {background:url("../../img/comic/img22.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic23 {background:url("../../img/comic/img23.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic24 {background:url("../../img/comic/img24.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic25 {background:url("../../img/comic/img25.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic26 {background:url("../../img/comic/img26.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic27 {background:url("../../img/comic/img27.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic28 {background:url("../../img/comic/img28.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic29 {background:url("../../img/comic/img29.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic30 {background:url("../../img/comic/img30.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic31 {background:url("../../img/comic/img31.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic32 {background:url("../../img/comic/img32.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic33 {background:url("../../img/comic/img33.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic34 {background:url("../../img/comic/img34.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic35 {background:url("../../img/comic/img35.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic36 {background:url("../../img/comic/img36.jpg") no-repeat center center / cover;}
.comic-box .comic-list li.comic37 {background:url("../../img/comic/img37.jpg") no-repeat center center / cover;}

.comic-box .comic-list li:nth-child(7n) {
	margin-right: 0;
}
.comic-box .comic-list li a {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	text-indent: -99999px;
}
.comic-box .comic-list li span {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #003377;
	mix-blend-mode: hard-light;
}
.comic-box .comic-list li span {
	-webkit-transition: all 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
	opacity: 0.0;
}
.comic-box .comic-list li:hover span {
	-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);
	opacity: 0.5;
}
/*------------------------------------------------------------------------------
								BOTTOM
------------------------------------------------------------------------------*/
#bottom-area {
	box-sizing: border-box;
	overflow: hidden;
	height: 100vh;
	min-height: 760px;
	max-height: 1000px;
	background: #FFFFFF;
	position: relative;
}
#bottom-area .bottom-box {
	width: 400px;
	height: 520px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
}
#bottom-area .bottom-box .logo {
	text-indent: -99999px;
	height: 0px;
	line-height: 0px;
	padding-top: 100%;
	background: url("../../img/bottom/logo.gif") no-repeat center center / contain;
}
#bottom-area .bottom-box .day {
	font-size: 80px;
	font-family: "Teko", sans-serif;
	font-optical-sizing: auto;
	text-align: center;
	color: #003377;
	font-weight: 500;
	margin-top: 0.6em;
	line-height: 1em;
}
#bottom-area .bottom-box .day span {
	font-size: 60px;
}
/*------------------------------------------------------------------------------
								SP
------------------------------------------------------------------------------*/
@media screen and (max-width: 1000px) {
/*------------------------------------------------------------------------------
								共通
------------------------------------------------------------------------------*/
section.scrollpoint {
	margin-top: -20vw;
	padding-top: 20vw;
	position: relative;
}
#contents-wrapper {
	padding-bottom:42.8vw;
}
#wrapper {
	min-width:740px;
}
section .box {
	padding:0 0 0;
}
.fhd-bnr-area {
	position: relative;
	margin: 0 auto;
	text-align: center;
	font-size: 0px;
	line-height: 0px;
}
.fhd-bnr-area.bnr1 {
	width: 92vw;
}
.fhd-bnr-area li {
	display: inline-block;
	margin: 0 1%;
	box-sizing: border-box;
}
.fhd-bnr-area.bnr1 li {
	width: 98%;
}
.main-bnr-area {
	padding-top: 1vw;
}
.main-bnr-area.bnr1 {
	width: 75%;
}
.main-bnr-area.bnr2 {
	width: 75%;
}
.main-bnr-area.bnr3 {
	width: 75%;
}
.main-bnr-area.bnr4 {
	width: 75%;
}
.main-bnr-area.bnr5 {
	width: 75%;
}
.main-bnr-area li {
	display: inline-block;
	margin: 0 0 4%;
	box-sizing: border-box;
	border: 1px solid #31333b;
}
.main-bnr-area.bnr1 li {
	width: 100%;
}
.main-bnr-area.bnr2 li {
	width: 100%;
}
.main-bnr-area.bnr3 li {
	width: 100%;
}
.main-bnr-area.bnr4 li {
	width: 100%;
}

.bnr-area.bnr1 {
	width: 46vw;
}
.bnr-area.bnr2 {
	width: 100%;
	box-sizing: border-box;
	padding: 0 4vw;
}
.bnr-area.bnr3 {
	width: 100%;
	box-sizing: border-box;
	padding: 0 4vw;
}
.bnr-area.bnr4 {
	width: 100%;
	box-sizing: border-box;
	padding: 0 4vw;
}
.bnr-area.bnr1 li {
	width: 100%;
	display: inline-block;
	margin: 0 0;
	box-sizing: border-box;
}
.bnr-area.bnr2 li {
	width: 49%;
	display: inline-block;
	margin: 0 0.5%;
	box-sizing: border-box;
}
.bnr-area.bnr3 li {
	width: 49%;
	display: inline-block;
	margin: 0 0.5% 1%;
	box-sizing: border-box;
}
.bnr-area.bnr4 li {
	width: 49%;
	display: inline-block;
	margin: 0 0.5% 1%;
	box-sizing: border-box;
}

/*------------------------------------------------------------------------------
								BG MOVIE
------------------------------------------------------------------------------*/
#bgmovie-wrapper {
	display: none;
}
#main-area .ami {
	display: none;
}
/*------------------------------------------------------------------------------
								MAIN
------------------------------------------------------------------------------*/
#main-area {
	height: 100vh;
	height: 100dvh;
	min-height: 160vw!important;
	max-height: 178vw!important;
	box-sizing: border-box;
	padding-top: 12vw;
}
#main-area .main-box {
	width: 100%;
	height: 100%;
	position: relative;
}
#main-area .main-box .sp-main {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
#main-area .main-box .sp-main .sp-main-bg {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url("../../img/top/sp-main-bg.jpg") no-repeat center center / cover;
}
#main-area .main-box .sp-main .sp-main-img {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url("../../img/top/sp-main-img.png") no-repeat center center / cover;
}
#main-area .main-box .sp-main .sp-main-logo-light {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 108%;
	padding-top: 108%;
	height: 0px;
	line-height: 0px;
	margin-left: -54%;
	margin-top: -71.4%;
	background: url("../../img/top/sp-main-logo-light.png") no-repeat center center / cover;
}
#main-area .main-box .sp-main .sp-main-logo {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url("../../img/top/sp-main-logo.png") no-repeat center center / cover;
	text-indent: -99999px;
}
#main-area .main-box .sp-main .sp-main-smoke {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url("../../img/top/sp-main-smoke.png") no-repeat center center / cover;
}
#main-area .main-box .sp-main .sp-main-copy {
	position: absolute;
	bottom: 0px;
	left: 4vw;
	width: 48%;
	padding-top: 23%;
	height: 0px;
	line-height: 0px;
	background: url("../../img/top/sp-main-copy.png") no-repeat center center / cover;
	text-indent: -99999px;
}
#main-area .main-box .sp-main .sp-main-day {
	position: absolute;
	bottom: 3.5vw;
	right: 4vw;
	width: 20%;
	padding-top: 10%;
	height: 0px;
	line-height: 0px;
	background: url("../../img/top/sp-main-day.png") no-repeat center center / cover;
	text-indent: -99999px;
}


.topMainSpOut {
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	opacity: 0.0;
}
.topMainSpIn {
	-webkit-transition: all 2s cubic-bezier(0.25, 1, 0.5, 1);
	transition:         all 2s cubic-bezier(0.25, 1, 0.5, 1);
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
	opacity: 1.0;
}

#main-area .main-box .sp-main .sp-main-logo-light.out {
	-webkit-transform: rotate(-144deg);
	transform: rotate(-144deg);
	opacity: 0.0;
}

#main-area .main-box .sp-main .sp-main-logo.out {
	-webkit-transform: scale(0.3);
	transform: scale(0.3);
	opacity: 1.0;
}

#main-area .main-box .sp-main .sp-main-smoke.out {
	opacity: 0.0;
}
#main-area .main-box .sp-main .sp-main-copy.out {
	opacity: 0.0;
}
#main-area .main-box .sp-main .sp-main-day.out {
	opacity: 0.0;
}

#main-area .main-box .sp-main .sp-main-logo-light.in {
	-webkit-transition: all 1.5s cubic-bezier(0.87, 0, 0.13, 1);
	transition:         all 1.5s cubic-bezier(0.87, 0, 0.13, 1);
	-webkit-transform: rotate(-72deg);
	transform: rotate(-72deg);
	opacity: 1.0;
}

#main-area .main-box .sp-main .sp-main-logo-light.in2 {
	-webkit-transition: all 1.5s cubic-bezier(0.87, 0, 0.13, 1);
	transition:         all 1.5s cubic-bezier(0.87, 0, 0.13, 1);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	opacity: 1.0;
}

#main-area .main-box .sp-main .sp-main-logo.in {
	-webkit-transition: all 2s cubic-bezier(0.25, 1, 0.5, 1);
	transition:         all 2s cubic-bezier(0.25, 1, 0.5, 1);
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
	opacity: 1.0;
}

#main-area .main-box .sp-main .sp-main-smoke.in {
	-webkit-transition: all 2s cubic-bezier(0.61, 1, 0.88, 1);
	transition:         all 2s cubic-bezier(0.61, 1, 0.88, 1);
	opacity: 1.0;
}
#main-area .main-box .sp-main .sp-main-copy.in {
	-webkit-transition: all 2s cubic-bezier(0.61, 1, 0.88, 1);
	transition:         all 2s cubic-bezier(0.61, 1, 0.88, 1);
	opacity: 1.0;
}
#main-area .main-box .sp-main .sp-main-day.in {
	-webkit-transition: all 2s cubic-bezier(0.61, 1, 0.88, 1);
	transition:         all 2s cubic-bezier(0.61, 1, 0.88, 1);
	opacity: 1.0;
}

/*------------------------------------------------------------------------------
								MIDDLE
------------------------------------------------------------------------------*/
#middle-area .billing h3 {
	font-size: 2.8vw;
	margin-bottom: 6vw;
}
#middle-area .billing h3 span{
	margin-right: 0px;
	display: block;
	margin-bottom: 2vw;
}
#middle-area .billing h4 {
	font-size: 2.3vw;
	margin-bottom: 3vw;
}
#middle-area .billing h4 span{
	margin-right: 0px;
	text-indent: 1em;
	display: block;
	margin-bottom: 2vw;
}
#middle-area .billing p {
	font-size: 1.7vw;
}
#middle-area .billing p .toho {
	height: 2.4vw;
	top: -0.2em;
}
/*------------------------------------------------------------------------------
								SNS
------------------------------------------------------------------------------*/
.sns-link {
	width: 100%;
	box-sizing: border-box;
	padding: 0 4vw;
	margin: 0;
}
.sns-link li {
	width: 32.333%;
	margin-right: 0;
	margin: 0 0.5%;
	padding-left: 6vw;
	padding-right: 3.6vw;
	padding-top: 0.7vw;
	line-height: 8.32vw;
	height:9vw; 
	font-size: 3.3vw;
}
.sns-link li::after {
	width: 4vw;
	height: 9vw;
	background: url("../../img/common/arrow-right.png") no-repeat center center / 1.5vw auto;
}
.sns-link #sns-link1 {
	background: url("../../img/common/share-btn-blue.png") no-repeat left 1vw top -4.5vw / 6vw;
}
.sns-link #sns-link2 {
	background: url("../../img/common/share-btn-blue.png") no-repeat left 1vw top 1.5vw / 6vw;
}
.sns-link #sns-link3 {
	background: url("../../img/common/share-btn-blue.png") no-repeat left 1vw top -10.5vw / 6vw;
}
.sns-link li a {
	position:absolute;
	width:100%;
	height:100%;
	text-indent:-999999px;
	top:0px;
	left:0px;
}

/*------------------------------------------------------------------------------
								TRAILER
------------------------------------------------------------------------------*/
#movie-area .bg {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url("../../img/trailer/trailer-bg.png") no-repeat center top 40% / 200vw auto;
}
#trailer-area .prArea {
	max-width: 92vw;
}

/*------------------------------------------------------------------------------
								VISUAL
------------------------------------------------------------------------------*/
#visual-area .visual-main {
	height: 103vw;
	background: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.5), rgba(255,255,255,0.5), rgba(255,255,255,0.5), rgba(255,255,255,0.2));
}
#visual-area .visual-main #visual-slyder {
	top: 6vw;
	height: 91vw;
	width: 1982vw;
}

#visual-area .visual-main #visual-slyder li {
	width: 64vw;
	margin-right: 6vw;
}
#visual-area .visual-main #visual-slyder li:nth-child(2) {
	width: 92vw;
}

#visual-area #visual-action.visual-point1 .visual-main #visual-slyder {margin-left: -32vw;}
#visual-area #visual-action.visual-point2 .visual-main #visual-slyder {margin-left: -116vw;}
#visual-area #visual-action.visual-point3 .visual-main #visual-slyder {margin-left: -200vw;}
#visual-area #visual-action.visual-point4 .visual-main #visual-slyder {margin-left: -270vw;}
#visual-area #visual-action.visual-point5 .visual-main #visual-slyder {margin-left: -340vw;}
#visual-area #visual-action.visual-point6 .visual-main #visual-slyder {margin-left: -410vw;}
#visual-area #visual-action.visual-point7 .visual-main #visual-slyder {margin-left: -480vw;}
#visual-area #visual-action.visual-point8 .visual-main #visual-slyder {margin-left: -550vw;}
#visual-area #visual-action.visual-point9 .visual-main #visual-slyder {margin-left: -620vw;}
#visual-area #visual-action.visual-point10 .visual-main #visual-slyder {margin-left: -690vw;}
#visual-area #visual-action.visual-point11 .visual-main #visual-slyder {margin-left: -760vw;}
#visual-area #visual-action.visual-point12 .visual-main #visual-slyder {margin-left: -830vw;}
#visual-area #visual-action.visual-point13 .visual-main #visual-slyder {margin-left: -900vw;}
#visual-area #visual-action.visual-point14 .visual-main #visual-slyder {margin-left: -970vw;}
#visual-area #visual-action.visual-point15 .visual-main #visual-slyder {margin-left: -1040vw;}
#visual-area #visual-action.visual-point16 .visual-main #visual-slyder {margin-left: -1110vw;}
#visual-area #visual-action.visual-point17 .visual-main #visual-slyder {margin-left: -1180vw;}
#visual-area #visual-action.visual-point18 .visual-main #visual-slyder {margin-left: -1250vw;}
#visual-area #visual-action.visual-point19 .visual-main #visual-slyder {margin-left: -1320vw;}
#visual-area #visual-action.visual-point20 .visual-main #visual-slyder {margin-left: -1390vw;}
#visual-area #visual-action.visual-point21 .visual-main #visual-slyder {margin-left: -1460vw;}
#visual-area #visual-action.visual-point22 .visual-main #visual-slyder {margin-left: -1530vw;}
#visual-area #visual-action.visual-point23 .visual-main #visual-slyder {margin-left: -1600vw;}
#visual-area #visual-action.visual-point24 .visual-main #visual-slyder {margin-left: -1670vw;}
#visual-area #visual-action.visual-point25 .visual-main #visual-slyder {margin-left: -1740vw;}
#visual-area #visual-action.visual-point26 .visual-main #visual-slyder {margin-left: -1810vw;}
#visual-area #visual-action.visual-point27 .visual-main #visual-slyder {margin-left: -1880vw;}
#visual-area #visual-action.visual-point28 .visual-main #visual-slyder {margin-left: -1950vw;}

#visual-area .visual-navi {
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 12vw;
}

#visual-area .visual-navi .navi span {
	-webkit-transition: all 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
	opacity: 0.0;
}
#visual-area .visual-navi .navi:hover span {
	-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);
	opacity: 0.0;
}

#visual-area .visual-navi .navi1 {
	width: 24%;
	padding-top: 34%;
	background: url("../../img/visual/img1.jpg") no-repeat center center / cover;
	margin-right: 3%;
	margin-left: 0%;
	margin-bottom: 3.4%;
}
#visual-area .visual-navi .navi2 {
	width: 35%;
	padding-top: 21%;
	margin-top: 6.5%;
	margin-bottom: 6.5%;
	background: url("../../img/visual/img2.jpg") no-repeat center center / contain;
	margin-right: 0%;
}
#visual-area .visual-navi .navi3 {
	width: 100%;
	height: auto;
	margin-right: 0px;
	position: relative;
	overflow: hidden;
	margin-bottom: 2%;
}
#visual-area .visual-navi .navi4 {
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
}
#visual-area .visual-navi .navi-left {
	position: absolute;
	width: 6vw;
	height: 10vw;
	left: auto;
	top: 0px;
	right: 24vw;
	margin-top: auto;
}
#visual-area .visual-navi .navi-right {
	position: absolute;
	width: 6vw;
	height: 10vw;
	left: auto;
	top: 0px;
	right: 12vw;
	margin-top: auto;
}

/*------------------------------------------------------------------------------
								STORY
------------------------------------------------------------------------------*/
.story-box p {
	font-size: 2.8vw;
	line-height: 2.2em;
	margin-top: 3vw!important;
}

/*------------------------------------------------------------------------------
								CASTS
------------------------------------------------------------------------------*/
.cast-box {
	width: 100%;
	box-sizing: border-box;
	padding: 0 4vw;
}
.cast-box ul.cast li {
	width: 33.333%;
	margin-top: 8vw;
}
.cast-box ul.cast li:last-child::after {
	width: 0.2vw;
	margin-top: 1vw;
}
.cast-box ul.cast li p {
	font-size: 3.6vw;
}
.cast-box ul.cast li p span {
	font-size: 2.6vw;
	margin-bottom: 2.6vw;
}

/*------------------------------------------------------------------------------
								COMMENT
------------------------------------------------------------------------------*/
.comment-box {
	width: 100%;
	padding: 0 4vw;
}
.comment-box ul.comment li {
	padding: 5vw 4vw 4vw;
	margin-top: 4vw;
}
.comment-box ul.comment li h3 {
	font-size: 3.6vw;
	margin-bottom: 4vw;
}
.comment-box ul.comment li h3 span {
	font-size: 2.6vw;
	margin-bottom: 2vw;
}
.comment-box ul.comment li p {
	font-size: 2.5vw;
	margin-top: 0.75em;
}

/*------------------------------------------------------------------------------
								COMIC
------------------------------------------------------------------------------*/
.comic-box {
	width: 100%;
	padding: 0 4vw;
}

.comic-box .head .left-box {
	float: none;
	width: 66vw;
	margin: 0 auto 4vw;
	height: 20vw;
}
.comic-box .head .left-box h3 {
	width: 66vw;
	padding-top: 17%;
}
.comic-box .head .left-box h4 {
	font-size: 3.6vw;
	text-align: center;
	padding-top: 3vw;
}
.comic-box .head .right-box {
	float: none;
	width: 100%;
	height: auto;
	padding-top: 2.5vw;
	padding-bottom: 2.5vw
}
.comic-box .head .right-box p {
	color: #003377;
	font-size: 32px;
	font-family: 'Noto Serif JP', serif;
	font-weight: 800;
	text-align: center;
	line-height: 1.4em;
}
.comic-box .comic-list li {
	float: left;
	width: 24.25%;
	margin-right: 1%;
	margin-bottom: 1%;
	padding-top: 36.4%;
}

.comic-box .comic-list li:nth-child(7n) {
	margin-right: 1%;
}
.comic-box .comic-list li:nth-child(4n) {
	margin-right: 0px;
}
.comic-box .comic-list li span {
	-webkit-transition: none;
	transition:         none;
	opacity: 0.0;
}
.comic-box .comic-list li:hover span {
	-webkit-transition: none;
	transition:         none;
	opacity: 0.0;
}
/*------------------------------------------------------------------------------
								BOTTOM
------------------------------------------------------------------------------*/
#bottom-area {
	min-height: 90vw;
	max-height: 133.8vw;
}
#bottom-area .bottom-box {
	width: 60vw;
	height: 86vw;
}
#bottom-area .bottom-box .day {
	font-size: 12vw;
}
#bottom-area .bottom-box .day span {
	font-size: 8vw;
}

/*------------------------------------------------------------------------------
								ANIMATION
------------------------------------------------------------------------------*/
.fromBottomOut {
	transform: translate(0,4vw);
	opacity: 0.0;
}
}

@media print{
}