@charset "UTF-8";

/* ========================================
	content
======================================== */
.l-contents{
	background: url(../images/mode/cont_bg.png) repeat-y top center;
}
@media screen and (min-width: 1921px) {
	.l-contents{
		background-size:100% auto;
	}
}
/* ========================================
	MV
======================================== */
.p-mode-mv_in{
	position: relative;
	width: 57.32916666%; /* 1100 / 1920 * 100 */
	margin: 0 auto;
	min-width: 960px;
	max-width: 2000px;
	text-align: left;
}
.p-mode-mv_in .Inner{
	position: relative;
	padding-top: 45.9375%; /* 588 / 1280 * 100*/
}
.p-mode-mv_in h1{
	position: absolute;
	width: 52.6363636%; /* 579 / 1100 * 100 */
	top: 4%;
	left: -10%;
	z-index: 10;
}
	.is-tablet .p-mode-mv_in h1{
		left: -6.5%;
	}
@media screen and (max-width: 1100px){
	.p-mode-mv_in h1{
		left: -6.5%;
	}
}

.p-mode-mv_lead{
	position: absolute;
	width: 42.7272727%; /* 470 / 1100 * 100 */
	z-index: 10;
	top: 65%;
	left: 4.3%;
}
.is-animation .item-y,
.no-js .item-y {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.item-y{
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(90px);
	transform: translateY(90px);
	transition:
		opacity 1000ms,
		-webkit-transform 1000ms,
		transform 1000ms;
}
.item-x01{
	-webkit-animation: item-x01 5s infinite;
	animation: item-x01 5s ease-in-out infinite;
}
.item-x02{
	-webkit-animation: item-x02 5s infinite;
	animation: item-x02 5s ease-in-out infinite;
	-webkit-animation-delay:3s;
	animation-delay:3s;
}
@-webkit-keyframes item-x01 {
    0% {
			visibility: hidden;
			opacity: 0;
			-webkit-transform: translateX(-150px);
			transform: translateX(-150px);
    }
    50% {
			visibility: visible;
			opacity: 1;
			-webkit-transform: translateX(0);
			transform: translateX(0);
    }
	100% {
			visibility: hidden;
			opacity: 0;
			-webkit-transform: translateX(-150px);
			transform: translateX(-150px);
    }
}
@keyframes item-x01 {
    0% {
			visibility: hidden;
			opacity: 0;
			-webkit-transform: translateX(-150px);
			transform: translateX(-150px);
    }
    50% {
			visibility: visible;
			opacity: 1;
			-webkit-transform: translateX(0);
			transform: translateX(0);
    }
		
	100% {
			visibility: hidden;
			opacity: 0;
			-webkit-transform: translateX(-150px);
			transform: translateX(-150px);
    }
}
@-webkit-keyframes item-x02 {
    0% {
			visibility: hidden;
			opacity: 0;
			-webkit-transform: translateX(150px);
			transform: translateX(150px);
    }
    50% {
			visibility: visible;
			opacity: 1;
			-webkit-transform: translateX(0);
			transform: translateX(0);
    }

		100% {
			visibility: hidden;
			opacity: 0;
			-webkit-transform: translateX(150px);
			transform: translateX(150px);
    }
}
@keyframes item-x02 {
    0% {
			visibility: hidden;
			opacity: 0;
			-webkit-transform: translateX(150px);
			transform: translateX(150px);
    }
    50% {
			visibility: visible;
			opacity: 1;
			-webkit-transform: translateX(0);
			transform: translateX(0);
    }
	100% {
			visibility: hidden;
			opacity: 0;
			-webkit-transform: translateX(150px);
			transform: translateX(150px);
    }
}

.item-x02{
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateX(90px);
	transform: translateX(90px);
	transition:
		opacity 400ms,
		-webkit-transform 500ms,
		transform 500ms;
}
.p-mode-mv_bg{
	position: absolute;
	width: 130.2727272%; /* 1433 / 1100 * 100 */
	top: 0;
	left: -15.363636%; /* 169 / 1100 * 100 */
	z-index: 0;
}
.p-mode-mv_line{
	position: absolute;
	width: 88.2727272%; /* 971 / 1100 * 100 */
	top: 43%;
	left: -37.4545454%; /* 412 / 1100 * 100 */
	z-index: 10;
}
.p-mode-mv_3ds{
	position: absolute;
	width: 57.1818181%; /* 629 / 1100 * 100 */
	top: 5%;
	right: -5.9%; /* 65 / 1100 * 100 */
	z-index: 10;
}
@media screen and (max-width: 1000px){
	.p-mode-mv_in h1{
		left: -4.5%;
	}
	.p-mode-mv_line{
		left: -35%;
	}
}

/* ========================================
	local
======================================== */
.p-mode-local,
.p-mode-dl{
	position: relative;
	width: 57.7%; /* 1108 / 1920 * 100 */
	min-width: 960px;
	max-width: 2000px;
}
.p-mode-local{
	margin: 5% auto 2% auto;
}
.p-mode-dl{
	margin: 0 auto;
}
.p-mode-local_bg,
.p-mode-dl_bg{
	position: relative;
}
.p-mode-local h2{
	position: absolute;
	width: 64.8%; /* 718 / 1108 * 100 */
	top: 11.6169544%;/* 74 / 637 * 100 */
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
.p-mode-local_in{
	position: absolute;
	width: 74.6389891%; /* 827 / 1108 * 100 */
	top: 52%;
	left: 12.9%; /* 143 / 1108 * 100 */
	overflow: hidden;
}
.p-mode-local_thumb{
	position: relative;
	width: 50.5441354%; /* 418 / 827 * 100 */
	float: left;
	overflow: hidden;
}
.p-mode-local_yt{
	position: relative;
	display: block;
	z-index: 100;
	pointer-events: none;
}
/*mov*/
.mov{
	position: absolute;
	/*width: 95.6937799%; 400 / 418 *100 */
	width: 100%;
	height: 100%;/* 240 / 258 * 100 */
	top: 0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	z-index: 0;
}
.player_wrap{
	display: block;
	position: relative;
	height: 0;
	margin-top: 2%;
	padding-top: 56.25%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.yt_player{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
}
.p-mode-local_in p{
	width: 45.7%; /* 378 / 827 * 100 */
	float: right;
	margin-top: 8%;
}
.p-mode-local_chara{
	position: absolute;
	width: 28.5198555%; /* 316 / 1108 * 100 */
	top: -15%;
	left: 6%;
}

/* ========================================
	dl
======================================== */
.p-mode-dl{
	margin-bottom: 8%;
}
.p-mode-dl h2{
	position: absolute;
	width: 67%; /* 743 / 1108 * 100 */
	top: 8%;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
.p-mode-dl_lead{
	position: absolute;
	width: 60.2888%; /* 668 / 1108 * 100 */
	top: 39%;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
.p-mode-dl_in{
	position: absolute;
	width: 77.2563176%; /* 856 / 1108 * 100 */
	top: 49%;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}
.p-mode-dl_in li{
	width: 48.8317757%; /* 418 / 856 * 100 */
}
.p-mode-dl_chara{
	position: absolute;
	width: 26.8953%; /* 298 / 1108 * 100 */
	top: 13.5%;
	right: -8%;
}