/*------------------------------------------------------------------------------
								共通
------------------------------------------------------------------------------*/
#contents-wrapper {
	padding-bottom:310px;
}
.main-bnr-area {
	position: relative;
	margin: 0 auto;
	text-align: center;
	font-size: 0px;
	line-height: 0px;
	box-sizing: border-box;
}
.main-bnr-area.bnr1 {
	width: 500px;
}
.main-bnr-area.bnr2 {
	width: 920px;
}
.main-bnr-area.bnr3 {
	width: 100%;
	max-width: 1320px;
	padding: 0 30px;
}
.main-bnr-area.bnr4 {
	width: 880px;
}
.main-bnr-area.bnr5 {
	width: 100%;
	max-width: 1320px;
	padding: 0 30px;
}
.main-bnr-area li {
	display: inline-block;
	margin: 0 0.5% 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: 49%;
}
.main-bnr-area.bnr3 li {
	width: 32.333%;
}
.main-bnr-area.bnr4 li {
	width: 49%;
}

.bnr-area {
	position: relative;
	margin: 0 auto;
	font-size: 0px;
}
.bnr-area.bnr1 {
	width: 1080px;
	text-align: center;
}
.bnr-area.bnr2 {
	width: 1080px;
	text-align: center;
}
.bnr-area.bnr3 {
	width: 1080px;
	text-align: center;
}
.bnr-area.bnr4 {
	width: 100%;
	max-width: 1440px;
	padding: 0 40px;
	box-sizing: border-box;
}
.bnr-area.bnr1 li {
	width: 32.333%;
	display: inline-block;
	margin: 0 0.5%;
	box-sizing: border-box;
}
.bnr-area.bnr2 li {
	width: 32.333%;
	display: inline-block;
	margin: 0 0.5%;
	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;
}
/*------------------------------------------------------------------------------
								MAIN
------------------------------------------------------------------------------*/
#main-area {
	position: relative;
	width: 100%;
	padding:0;
	height: 100vh;
	min-height: 50vw;
	max-height: 62vw;
	margin: 0 auto;
	background: #9fa8af;
	box-sizing: border-box;
	overflow: hidden;
}
.main-bg-area-pc {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
.main-bg-area-pc .main-bg {
	position: absolute;
	width: 50%;
	height: 100%;
	top: 0px;
	overflow: hidden;
}
.main-bg-area-pc .main-bg1 {
	left: 0px;
}
.main-bg-area-pc .main-bg2 {
	left: 50%;
}
.main-bg .main-img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
.main-bg1 .main-img {
	background: url("../../img/mv/mv-img1.jpg") no-repeat center center / cover;
}
.main-bg2 .main-img {
	background: url("../../img/mv/mv-img2.jpg") no-repeat center center / cover;
}
#main-area h1 {
	position: absolute;
	width: 100%;
	padding-top: 14vw;
	line-height: 0px;
	height: 0px;
	bottom: 12%;
	left: 50%;
	margin-left: -49.8%;
	background: url("../../img/mv/logo.png") no-repeat center center / contain;
	text-indent: -99999px;
}
#main-area h2 {
	position: absolute;
	width: 100%;
	padding-top: 6.5vw;
	line-height: 0px;
	height: 0px;
	bottom: 3%;
	left: 50%;
	margin-left: -50%;
	background: url("../../img/mv/date.png") no-repeat center center / contain;
	text-indent: -99999px;
}
.main-bg .fraction-area {
	position: absolute;
	width: 80%;
	padding-top: 86.4%;
	height: 0px;
	line-height: 0px;
	top: 50%;
	left: 50%;
	margin-top: -49%;
	margin-left: -40%;
}
.fraction1,.fraction2,.fraction3 ul li,.fraction4 {
	text-indent: -99999px;
}
.fraction1,.fraction2,.fraction3,.fraction3 ul li,.fraction4 {
	position: absolute;
	width: 100%;
	height: 100%;
	line-height: 0px;
	top: 0px;
	left: 0px;
}

#main-area .copy-area {
	position: absolute;
	width: 3vw;
	padding-top: 30vw;
	line-height: 0px;
	height: 0px;
	top: 50%;
	left: 50%;
	margin-top: -23.5%;
	margin-left: -1.5%;
	text-indent: -99999px;
}
#main-area .copy-area li {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
.fraction1 {background: url("../../img/mv/fraction1.png") no-repeat center center / contain;}
.fraction2 {background: url("../../img/mv/fraction2.png") no-repeat center center / contain;}
.fraction4 {background: url("../../img/mv/fraction4.png") no-repeat center center / contain;}
.fraction3 ul li {
	opacity: 0;
}
.fraction3 ul li.fraction3-1 {background: url("../../img/mv/fraction3-1.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-2 {background: url("../../img/mv/fraction3-2.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-3 {background: url("../../img/mv/fraction3-3.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-4 {background: url("../../img/mv/fraction3-4.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-5 {background: url("../../img/mv/fraction3-5.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-6 {background: url("../../img/mv/fraction3-6.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-7 {background: url("../../img/mv/fraction3-7.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-8 {background: url("../../img/mv/fraction3-8.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-9 {background: url("../../img/mv/fraction3-9.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-10 {background: url("../../img/mv/fraction3-10.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-11 {background: url("../../img/mv/fraction3-11.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-12 {background: url("../../img/mv/fraction3-12.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-13 {background: url("../../img/mv/fraction3-13.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-14 {background: url("../../img/mv/fraction3-14.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-15 {background: url("../../img/mv/fraction3-15.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-16 {background: url("../../img/mv/fraction3-16.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-17 {background: url("../../img/mv/fraction3-17.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-18 {background: url("../../img/mv/fraction3-18.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-19 {background: url("../../img/mv/fraction3-19.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-20 {background: url("../../img/mv/fraction3-20.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-21 {background: url("../../img/mv/fraction3-21.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-22 {background: url("../../img/mv/fraction3-22.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-23 {background: url("../../img/mv/fraction3-23.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-24 {background: url("../../img/mv/fraction3-24.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-25 {background: url("../../img/mv/fraction3-25.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-26 {background: url("../../img/mv/fraction3-26.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-27 {background: url("../../img/mv/fraction3-27.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-28 {background: url("../../img/mv/fraction3-28.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-29 {background: url("../../img/mv/fraction3-29.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-30 {background: url("../../img/mv/fraction3-30.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-31 {background: url("../../img/mv/fraction3-31.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-32 {background: url("../../img/mv/fraction3-32.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-33 {background: url("../../img/mv/fraction3-33.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-34 {background: url("../../img/mv/fraction3-34.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-35 {background: url("../../img/mv/fraction3-35.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-36 {background: url("../../img/mv/fraction3-36.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-37 {background: url("../../img/mv/fraction3-37.png") no-repeat center center / contain;}
.fraction3 ul li.fraction3-38 {background: url("../../img/mv/fraction3-38.png") no-repeat center center / contain;}

.fraction3 ul.act1 li.fraction3-1{opacity: 1;}
.fraction3 ul.act2 li.fraction3-2{opacity: 1;}
.fraction3 ul.act3 li.fraction3-3{opacity: 1;}
.fraction3 ul.act4 li.fraction3-4{opacity: 1;}
.fraction3 ul.act5 li.fraction3-5{opacity: 1;}
.fraction3 ul.act6 li.fraction3-6{opacity: 1;}
.fraction3 ul.act7 li.fraction3-7{opacity: 1;}
.fraction3 ul.act8 li.fraction3-8{opacity: 1;}
.fraction3 ul.act9 li.fraction3-9{opacity: 1;}
.fraction3 ul.act10 li.fraction3-10{opacity: 1;}
.fraction3 ul.act11 li.fraction3-11{opacity: 1;}
.fraction3 ul.act12 li.fraction3-12{opacity: 1;}
.fraction3 ul.act13 li.fraction3-13{opacity: 1;}
.fraction3 ul.act14 li.fraction3-14{opacity: 1;}
.fraction3 ul.act15 li.fraction3-15{opacity: 1;}
.fraction3 ul.act16 li.fraction3-16{opacity: 1;}
.fraction3 ul.act17 li.fraction3-17{opacity: 1;}
.fraction3 ul.act18 li.fraction3-18{opacity: 1;}
.fraction3 ul.act19 li.fraction3-19{opacity: 1;}
.fraction3 ul.act20 li.fraction3-20{opacity: 1;}
.fraction3 ul.act21 li.fraction3-21{opacity: 1;}
.fraction3 ul.act22 li.fraction3-22{opacity: 1;}
.fraction3 ul.act23 li.fraction3-23{opacity: 1;}
.fraction3 ul.act24 li.fraction3-24{opacity: 1;}
.fraction3 ul.act25 li.fraction3-25{opacity: 1;}
.fraction3 ul.act26 li.fraction3-26{opacity: 1;}
.fraction3 ul.act27 li.fraction3-27{opacity: 1;}
.fraction3 ul.act28 li.fraction3-28{opacity: 1;}
.fraction3 ul.act29 li.fraction3-29{opacity: 1;}
.fraction3 ul.act30 li.fraction3-30{opacity: 1;}
.fraction3 ul.act31 li.fraction3-31{opacity: 1;}
.fraction3 ul.act32 li.fraction3-32{opacity: 1;}
.fraction3 ul.act33 li.fraction3-33{opacity: 1;}
.fraction3 ul.act34 li.fraction3-34{opacity: 1;}
.fraction3 ul.act35 li.fraction3-35{opacity: 1;}
.fraction3 ul.act36 li.fraction3-36{opacity: 1;}
.fraction3 ul.act37 li.fraction3-37{opacity: 1;}
.fraction3 ul.act38 li.fraction3-38{opacity: 1;}

#main-area .copy-area li.copy1 {background: url("../../img/mv/copy-pc1.png") no-repeat center center / contain;}
#main-area .copy-area li.copy2 {background: url("../../img/mv/copy-pc2.png") no-repeat center center / contain;}
#main-area .copy-area li.copy3 {background: url("../../img/mv/copy-pc3.png") no-repeat center center / contain;}
#main-area .copy-area li.copy4 {background: url("../../img/mv/copy-pc4.png") no-repeat center center / contain;}
#main-area .copy-area li.copy5 {background: url("../../img/mv/copy-pc5.png") no-repeat center center / contain;}
#main-area .copy-area li.copy6 {background: url("../../img/mv/copy-pc6.png") no-repeat center center / contain;}
#main-area .copy-area li.copy7 {background: url("../../img/mv/copy-pc7.png") no-repeat center center / contain;}
#main-area .copy-area li.copy8 {background: url("../../img/mv/copy-pc8.png") no-repeat center center / contain;}
#main-area .copy-area li.copy9 {background: url("../../img/mv/copy-pc9.png") no-repeat center center / contain;}
#main-area .copy-area li.copy10 {background: url("../../img/mv/copy-pc10.png") no-repeat center center / contain;}
#main-area .copy-area li.copy11 {background: url("../../img/mv/copy-pc11.png") no-repeat center center / contain;}
#main-area .copy-area li.copy12 {background: url("../../img/mv/copy-pc12.png") no-repeat center center / contain;}
#main-area .copy-area li.copy13 {background: url("../../img/mv/copy-pc13.png") no-repeat center center / contain;}
#main-area .copy-area li.copy14 {background: url("../../img/mv/copy-pc14.png") no-repeat center center / contain;}
#main-area .copy-area p {
	text-indent: -99999px;
}
.main-bg .dirty {
	position: absolute;
	width: 34.4vw;
	height: 34.4vw;
	background: url("../../img/mv/dirty.png") no-repeat center center / contain;
}
.main-bg1 .dirty {
	bottom: 50%;
	margin-bottom: -39vw;
	left: -12.5vw;
}
.main-bg2 .dirty {
	bottom: 50%;
	margin-bottom: -39vw;
	right: -16.5vw;
	transform: rotate(-45deg);
}

@media screen and (max-width: 1280px) {
#main-area {
	min-height: 716.8px;
	max-height: 793.6px;
}
#main-area h1 {
	padding-top: 179.2px;
}
#main-area h2 {
	padding-top: 83.2px;
}
#main-area .copy-area {
	width: 38.4px;
	padding-top: 384px;
}
.main-bg .dirty {
	width: 440.32px;
	height: 440.32px;
}
.main-bg1 .dirty {
	margin-bottom: -499.2px;
	left: -160px;
}
.main-bg2 .dirty {
	margin-bottom: -499.2px;
	right: -211.2px;
}	
}

/*------------------------------------------------------------------------------
								ANIMATION
------------------------------------------------------------------------------*/
.mainScaleDownOut {
	transform: scale(1.5,1.5);
	opacity: 1.0;
}
.mainScaleDownIn {
	-webkit-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 3s cubic-bezier(0.165, 0.84, 0.44, 1);
	transform: scale(1.0,1.0);
	opacity: 1.0;
}
.mainScaleUpOut {
	transform: scale(0.5,0.5);
	opacity: 1.0;
}
.mainScaleUpIn {
	-webkit-transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 2s cubic-bezier(0.165, 0.84, 0.44, 1);
	transform: scale(1.0,1.0);
	opacity: 1.0;
}
.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,60px);
	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;
}
.mainAlphaOut {
	opacity: 0.0;
}
.mainAlphaIn {
	-webkit-transition: all 3.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 3.0s cubic-bezier(0.165, 0.84, 0.44, 1);
	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: scale(1.0);
	opacity: 1.0;
}

/*------------------------------------------------------------------------------
								MIDDLE
------------------------------------------------------------------------------*/
#middle-area {
	background: #FFFFFF;
}
#middle-area .billing {
	width: 600px;
	height: 180px;
	margin: 0 auto;
	background: url("../../img/middle/billing.gif") no-repeat center center / contain
}
#middle-area .billing h3,#middle-area .billing h4,#middle-area .billing p {
	text-indent: -99999px;
	line-height: 0px;
}
/*------------------------------------------------------------------------------
								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: 300;
	line-height: 57px;
	height:60px; 
	box-sizing: border-box;
	font-size: 22px;
	position: relative;
	color: #525556;
	border: 1px solid #525556;
	font-family: "Teko", sans-serif;
	font-optical-sizing: auto;
	letter-spacing: 0.02em;
}
.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 {
	-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);
	background: url("../../img/common/share-btn-gray.png") no-repeat left 10px top -30px / 40px;
}
.sns-link #sns-link2 {
	-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);
	background: url("../../img/common/share-btn-gray.png") no-repeat left 10px top 10px / 40px;
}
.sns-link #sns-link3 {
	-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);
	background: url("../../img/common/share-btn-gray.png") no-repeat left 10px top -70px / 40px;
}
.sns-link #sns-link1:hover {
	-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);
	background:#edf0f4 url("../../img/common/share-btn-gray.png") no-repeat left 10px top -30px / 40px;
}
.sns-link #sns-link2:hover {
	-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);
	background:#edf0f4 url("../../img/common/share-btn-gray.png") no-repeat left 10px top 10px / 40px;
}
.sns-link #sns-link3:hover {
	-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);
	background:#edf0f4 url("../../img/common/share-btn-gray.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;
}

#share {
	position: relative;
	overflow: hidden;
	top: 0px;
	margin: 0 auto;
	right: 0px;
	width: 232px;
	height: 60px;
	padding-left: 0;
}

#share li {
	width: 50px;
	height: 60px;
	margin-right: 6px;
	float: left;
	position: relative;
}

#share li:first-child {
	margin-left: 60px;
}
#share li:first-child::before {
	content: "";
	width: 50px;
	height: 60px;
	position: absolute;
	top: 0px;
	left: -56px;
	background: url("../../img/common/share-icon.png") no-repeat center center / 30px;
}

#share .shareFb {
	-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);
	background: url("../../img/common/share-btn-gray.png") no-repeat left 0 top -180px / 60px;
}
#share .shareX {
	-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);
	background: url("../../img/common/share-btn-gray.png") no-repeat left 0 top -60px / 60px;
}
#share .shareLine {
	-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);
	background: url("../../img/common/share-btn-gray.png") no-repeat left 0 top -240px / 60px;
}
#share .shareFb:hover {
	-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);
	background: url("../../img/common/share-btn-act.png") no-repeat left 0 top -180px / 60px;
}
#share .shareX:hover {
	-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);
	background: url("../../img/common/share-btn-act.png") no-repeat left 0 top -60px / 60px;
}
#share .shareLine:hover {
	-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);
	background: url("../../img/common/share-btn-act.png") no-repeat left 0 top -240px / 60px;
}

#share li a {
	position:absolute;
	width:100%;
	height:100%;
	text-indent:-999999px;
	top:0px;
	left:0px;
}

/*------------------------------------------------------------------------------
								TRAILER
------------------------------------------------------------------------------*/
#movie-area {
    position: relative;
	background: #525556;
}
#movie-area .content {
	position: relative;
	height: 100%;
	width: 100%;
}
#movie-area h2 {
	background: url("../../img/title/title-trailer.png") no-repeat center center / contain;
}
#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: 1000px;
	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%;
}
#trailer-area  ul {
	margin: 0.8% auto 0 auto;
	position:relative;
	width: 100%;
	overflow: hidden;
}
#trailer-area ul li {
	margin:0 0.5% 0.5% 0;
	float:left;
	height:50px;
	padding:0;
	position: relative;
	width: 24.625%;
}
#trailer-area  ul li div {
	background:#003377;
	width: 100%;
	height: 100%;
}
#trailer-area  ul li div a {
	width:100%;
	height:100%;
	position:absolute;
	font-size:20px;
	text-align:center;
	color: #FFFFFF;
	font-weight:700;
	box-sizing:border-box;
    line-height: 30px;
	padding: 10px 0;
	text-decoration: none;
}

/*------------------------------------------------------------------------------
								STORY
------------------------------------------------------------------------------*/
#story-area {
    position: relative;
	background: url("../../img/common/content-bg.jpg") repeat center center / 1600px auto ;
}
#story-area .content {
	position: relative;
	height: 100%;
	width: 100%;
}
#story-area h2 {
	background: url("../../img/title/title-story.png") no-repeat center center / contain;
}
#story-area h3 {
	font-size: 42px;
	text-align: center;
	line-height: 1.9em;
	font-family: 'Noto Serif JP', serif;
	font-weight: 600;
}
#story-area p {
	font-size: 26px;
	text-align: center;
	line-height: 1.9em;
	font-family: 'Noto Serif JP', serif;
	font-weight: 600;
}
#story-area h4 {
	text-indent: -99999px;
	padding-top: 260px;
	background: url("../../img/story/copy.png") no-repeat center center / contain
} 

/*------------------------------------------------------------------------------
								COMMENT
------------------------------------------------------------------------------*/
#comment-area {
    position: relative;
}
#comment-area .content {
	position: relative;
	height: 100%;
	width: 100%;
}
#comment-area h2 {
	background: url("../../img/title/title-comment.png") no-repeat center center / contain;
}
#comment-area ul {
	width: 100%;
	max-width: 1200px;
	box-sizing: border-box;
	padding: 0 40px;
	margin: 0 auto;
}

#comment-area ul li {
	width: 100%;
	box-sizing: border-box;
	padding: 60px 40px 40px;
	background: url("../../img/common/content-bg2.jpg") repeat center center / 1600px auto ;
}
#comment-area h3 {
	font-size: 36px;
	font-family: 'Noto Serif JP', serif;
	line-height: 1em;
	font-weight: 500;
	text-align: center;
}
#comment-area h3 span {
	font-size: 24px;
	font-weight: 500;
}
#comment-area h3 em {
	font-style: normal;
	display: inline;
}
#comment-area h3 ruby[data-ruby] {
  position:relative;
}
#comment-area h3 ruby[data-ruby]::before {
  content: attr(data-ruby);
  position:absolute;
  left:-2em;
  top:-1.6em;
  right:-2em;
  text-align:center;
  font-size:.36em;
  letter-spacing: 0.2em;
}
#comment-area h3 span ruby[data-ruby]::before {
  top:-2.0em;
  font-size:.45em;
  letter-spacing: 0.2em;
}
#comment-area h3 rt {
  display:none;
}
#comment-area p {
	font-size: 19px;
	line-height: 2em;
	font-weight: 400;
	text-align: justify;
}

/*------------------------------------------------------------------------------
								ORIGINAL
------------------------------------------------------------------------------*/
#original-area {
    position: relative;
	background: url("../../img/common/content-bg.jpg") repeat center center / 1600px auto ;
}
#original-area h2 {
	background: url("../../img/title/title-original.png") no-repeat center center / contain;
}
#original-area .content {
	position: relative;
	height: 100%;
	width: 100%;
}
#original-area .img-box {
	width: 500px;
	padding-top: 710px;
	margin: 0 auto;
	background: url("../../img/original/syoei.jpg") no-repeat center center / cover;
}
#original-area .txt-box {
	width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 40px;
}
#original-area h3 {
	font-size: 36px;
	font-family: 'Noto Serif JP', serif;
	font-weight: 600;
	line-height: 1em;
	text-align: center;
}
#original-area h3 strong {
	font-size: 42px;
	font-weight: 600;
	margin-right: -0.5em;
}
#original-area h4 {
	font-size: 24px;
	font-family: 'Noto Serif JP', serif;
	font-weight: 600;
	line-height: 1em;
	text-align: center;
}
#original-area h4 span {
	margin: 0 -0.25em;
}
#original-area p {
	font-size: 30px;
	line-height: 1.9em;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
	text-align: center;
}
#original-area .date {
	font-size: 20px;
	width: 42em;
	border-top: 1px solid #525556;
	box-sizing: border-box;
	margin: 0 auto;
}
#original-area .date p {
	font-size: 20px;
	text-align: left;
	line-height: 1.8em;
}
#original-area .date p.indent {
	padding-left: 5em;
}


/*------------------------------------------------------------------------------
								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: 100%;
}
.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: 49%;
	display: inline-block;
	margin: 0 0.5%;
	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;
}

/*------------------------------------------------------------------------------
								MAIN
------------------------------------------------------------------------------*/
#main-area {
	height: 100vh;
	height: 100dvh;
	min-height: 160vw!important;
	max-height: 170vw!important;
	box-sizing: border-box;
	padding-top: 0;
}
.main-bg-area-sp {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
.main-bg-area-sp .main-bg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	overflow: hidden;
}
.main-bg-area-sp .main-bg #main-img-sp-area {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	overflow: hidden;
}
.main-bg-area-sp .main-bg .main-img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
.main-bg .main-img1-sp {
	background: url("../../img/mv/mv-img1.jpg") no-repeat center center / 125vw auto;
}
.main-bg .main-img2-sp {
	background: url("../../img/mv/mv-img2.jpg") no-repeat center center / 125vw auto;
}
.main-bg-area-sp .main-bg #main-img-sp-area.act1 .main-img1-sp {
	-webkit-transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	transform: scale(1.0,1.0);
	opacity: 1.0;
}
.main-bg-area-sp .main-bg #main-img-sp-area.act1 .main-img2-sp {
	-webkit-transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	transform: scale(1.25,1.25);
	opacity: 0.0;
}
.main-bg-area-sp .main-bg #main-img-sp-area.act2 .main-img1-sp {
	-webkit-transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	transform: scale(1.25,1.25);
	opacity: 0.0;
}
.main-bg-area-sp .main-bg #main-img-sp-area.act2 .main-img2-sp {
	-webkit-transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition:         all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
	transform: scale(1.0,1.0);
	opacity: 1.0;
}
#main-area h1 {
	padding-top: 24vw;
	bottom: 17%;
}
#main-area h2 {
	padding-top: 14.5vw;
}
.main-bg .fraction-area {
	width: 100%;
	padding-top: 108%;
	margin-top: -61%;
	margin-left: -50%;
}

#main-area .copy-area {
	width: 70%;
	padding-top: 4.5%;
	line-height: 0px;
	height: 0px;
	top: 3%;
	margin-top: 0px;
	margin-left: -35%;
}
#main-area .copy-area li {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
#main-area .copy-area li.copy1 {background: url("../../img/mv/copy-sp1.png") no-repeat center center / contain;}
#main-area .copy-area li.copy2 {background: url("../../img/mv/copy-sp2.png") no-repeat center center / contain;}
#main-area .copy-area li.copy3 {background: url("../../img/mv/copy-sp3.png") no-repeat center center / contain;}
#main-area .copy-area li.copy4 {background: url("../../img/mv/copy-sp4.png") no-repeat center center / contain;}
#main-area .copy-area li.copy5 {background: url("../../img/mv/copy-sp5.png") no-repeat center center / contain;}
#main-area .copy-area li.copy6 {background: url("../../img/mv/copy-sp6.png") no-repeat center center / contain;}
#main-area .copy-area li.copy7 {background: url("../../img/mv/copy-sp7.png") no-repeat center center / contain;}
#main-area .copy-area li.copy8 {background: url("../../img/mv/copy-sp8.png") no-repeat center center / contain;}
#main-area .copy-area li.copy9 {background: url("../../img/mv/copy-sp9.png") no-repeat center center / contain;}
#main-area .copy-area li.copy10 {background: url("../../img/mv/copy-sp10.png") no-repeat center center / contain;}
#main-area .copy-area li.copy11 {background: url("../../img/mv/copy-sp11.png") no-repeat center center / contain;}
#main-area .copy-area li.copy12 {background: url("../../img/mv/copy-sp12.png") no-repeat center center / contain;}
#main-area .copy-area li.copy13 {background: url("../../img/mv/copy-sp13.png") no-repeat center center / contain;}
#main-area .copy-area li.copy14 {background: url("../../img/mv/copy-sp14.png") no-repeat center center / contain;}
.main-bg .dirty {
	position: absolute;
	width: 80vw;
	height: 80vw;
	bottom: 50%;
	margin-bottom: -94vw;
	left: -35vw;
	transform: rotate(-20deg)
}

/*------------------------------------------------------------------------------
								MIDDLE
------------------------------------------------------------------------------*/
#middle-area .billing {
	width: 100%;
	height: 27vw;
}
/*------------------------------------------------------------------------------
								SNS
------------------------------------------------------------------------------*/
.sns-link {
	width: 92vw;
	box-sizing: border-box;
	padding: 0;
	margin: 0 auto;
}
.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.6vw;
	letter-spacing: 0em;
}
.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 {
	-webkit-transition: none;
	transition:         none;
	background: url("../../img/common/share-btn-gray.png") no-repeat left 1vw top -4.5vw / 6vw;
}
.sns-link #sns-link2 {
	-webkit-transition: none;
	transition:         none;
	background: url("../../img/common/share-btn-gray.png") no-repeat left 1vw top 1.5vw / 6vw;
}
.sns-link #sns-link3 {
	-webkit-transition: none;
	transition:         none;
	background: url("../../img/common/share-btn-gray.png") no-repeat left 1vw top -10.5vw / 6vw;
}
.sns-link #sns-link1:hover {
	-webkit-transition: none;
	transition:         none;
	background: url("../../img/common/share-btn-gray.png") no-repeat left 1vw top -4.5vw / 6vw;
}
.sns-link #sns-link2:hover {
	-webkit-transition: none;
	transition:         none;
	background: url("../../img/common/share-btn-gray.png") no-repeat left 1vw top 1.5vw / 6vw;
}
.sns-link #sns-link3:hover {
	-webkit-transition: none;
	transition:         none;
	background: url("../../img/common/share-btn-gray.png") no-repeat left 1vw top -10.5vw / 6vw;
}

#share {
	width: 40vw;
	height: 10vw;
}

#share li {
	width: 8vw;
	height: 10vw;
	margin-right: 1vw;
}

#share li:first-child {
	margin-left: 10vw;
}
#share li:first-child::before {
	content: "";
	width: 8vw;
	height: 10vw;
	left: -8vw;
	background: url("../../img/common/share-icon.png") no-repeat center center / 5vw;
}

#share .shareFb {
	-webkit-transition: none;
	transition:         none;
	background: url("../../img/common/share-btn-gray.png") no-repeat left 0 top -30vw / 10vw;
}
#share .shareX {
	-webkit-transition: none;
	transition:         none;
	background: url("../../img/common/share-btn-gray.png") no-repeat left 0 top -10vw / 10vw;
}
#share .shareLine {
	-webkit-transition: none;
	transition:         none;
	background: url("../../img/common/share-btn-gray.png") no-repeat left 0 top -40vw / 10vw;
}
#share .shareFb:hover {
	-webkit-transition: none;
	transition:         none;
	background: url("../../img/common/share-btn-gray.png") no-repeat left 0 top -30vw / 10vw;
}
#share .shareX:hover {
	-webkit-transition: none;
	transition:         none;
	background: url("../../img/common/share-btn-gray.png") no-repeat left 0 top -10vw / 10vw;
}
#share .shareLine:hover {
	-webkit-transition: none;
	transition:         none;
	background: url("../../img/common/share-btn-gray.png") no-repeat left 0 top -40vw / 10vw;
}

#share li a {
	position:absolute;
	width:100%;
	height:100%;
	text-indent:-999999px;
	top:0px;
	left:0px;
}

/*------------------------------------------------------------------------------
								TRAILER
------------------------------------------------------------------------------*/
#trailer-area .prArea {
	max-width: 92vw;
}
#trailer-area  ul {
	margin: 2% auto 0 auto;
	position:relative;
	width: 100%;
	overflow: hidden;
}
#trailer-area ul li {
	margin:0 1% 1% 0!important;
	float:left;
	padding:0;
	position: relative;
	width: 24.25%!important;
	height: 8vw;
}
#trailer-area  ul li div {
	background:#003377;
	width: 100%;
	height: 100%;
}
#trailer-area  ul li div a {
	font-size:2.7vw;
    line-height: 8vw;
	padding: 0 0;
}

/*------------------------------------------------------------------------------
								STORY
------------------------------------------------------------------------------*/
#story-area h3 {
	font-size: 6vw;
}
#story-area p {
	font-size: 4vw;
}
#story-area h4 {
	padding-top: 40vw;
}
/*------------------------------------------------------------------------------
								COMMENT
------------------------------------------------------------------------------*/
#comment-area ul {
	width: 92vw;
	padding: 0 0;
}
#comment-area ul li {
	padding: 9vw 5vw 4vw;
}
#comment-area h3 {
	font-size: 5vw;
}
#comment-area h3 span {
	font-size: 3.8vw;
	line-height: 2.2em;
}
#comment-area h3 span ruby[data-ruby]::before {
  top:-2.7em;
}
#comment-area p {
	font-size: 3vw;
}
#comment-area h3 em {
	display: none;
}

/*------------------------------------------------------------------------------
								ORIGINAL
------------------------------------------------------------------------------*/
#original-area .img-box {
	width: 70%;
	padding-top: 100%;
}
#original-area .txt-box {
	width: 92%;
	padding: 0 0;
	margin: 0 auto;
}
#original-area h3 {
	font-size: 5vw;
}
#original-area h3 strong {
	font-size: 6.4vw;
}
#original-area h4 {
	font-size: 3.6vw;
}
#original-area p {
	font-size: 4.5vw;
}
#original-area .date {
	font-size: 3.6vw;
	width: 100%;
	border-top: 1px solid #525556;
}
#original-area .date p {
	font-size: 3vw;
	line-height: 1.6em;
}
#original-area .date p.indent {
	text-indent: -7.5em;
	padding-left: 12.5em;
}

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

@media print{
}