@charset "UTF-8";

/* ========================================
	content
======================================== */
.l-contents{
	width: 100%;
	background: url(../images/mode/cont_bg.png) repeat-y top center;
	background-size:100% auto;
	padding-bottom: 7%;
}

/* ========================================
	MV
======================================== */
.p-mode-mv,
.p-mode-mv_bg{
	position: relative;
	width: 100%;
}
.p-mode-mv{
	margin-bottom: 12%;
}
.p-mode-mv h1{
	position: absolute;
	width: 72.8%; /* 546 / 750 * 100 */
	top: 38.8446215%; /* 390 / 1004 * 100 */
	left: 0;
}
.p-mode-mv_lead{
	position: absolute;
	width: 88.4%; /* 663 / 750 * 100 */
	top: 78.486%; /* 788 / 1004 * 100 */
	left: 5.8666666%; /* 44 / 750 * 100 */
	-webkit-transition-delay: 200ms !important;
	transition-delay: 200ms !important;
}
.p-mode-local_chara{
	position: absolute;
	width: 42.1333333%; /* 316 / 750 * 100 */
	top: 62%;
	right: -8%;
}
.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:1s;
	animation-delay:1s;
}
@-webkit-keyframes item-x01 {
    0% {
			visibility: hidden;
			opacity: 0;
			-webkit-transform: translateX(15%);
			transform: translateX(15%);
    }
    50% {
			visibility: visible;
			opacity: 1;
			-webkit-transform: translateX(-10%);
			transform: translateX(-10%);
    }
	100% {
			visibility: hidden;
			opacity: 0;
			-webkit-transform: translateX(15%);
			transform: translateX(15%);
    }
}
@keyframes item-x01 {
	0% {
			visibility: hidden;
			opacity: 0;
			-webkit-transform: translateX(15%);
			transform: translateX(15%);
    }
    50% {
			visibility: visible;
			opacity: 1;
			-webkit-transform: translateX(-10%);
			transform: translateX(-10%);
    }
	100% {
			visibility: hidden;
			opacity: 0;
			-webkit-transform: translateX(15%);
			transform: translateX(15%);
    }
}
@-webkit-keyframes item-x02 {	
	0% {
			visibility: hidden;
			opacity: 0;
			-webkit-transform: translateX(-10%);
			transform: translateX(-10%);
    }
    50% {
			visibility: visible;
			opacity: 1;
			-webkit-transform: translateX(15%);
			transform: translateX(15%);
    }
	100% {
			visibility: hidden;
			opacity: 0;
			-webkit-transform: translateX(-10%);
			transform: translateX(-10%);
    }
}
@keyframes item-x02 {
   0% {
			visibility: hidden;
			opacity: 0;
			-webkit-transform: translateX(-10%);
			transform: translateX(-10%);
    }
    50% {
			visibility: visible;
			opacity: 1;
			-webkit-transform: translateX(15%);
			transform: translateX(15%);
    }
	100% {
			visibility: hidden;
			opacity: 0;
			-webkit-transform: translateX(-10%);
			transform: translateX(-10%);
    }
}


/* ========================================
	local
======================================== */
.p-mode-local,
.p-mode-dl,
.p-mode-local_bg,
.p-mode-dl_bg{
	position: relative;
	width: 100%;
}
.p-mode-local{
	margin: 0 auto 5% auto;
}
.p-mode-local h2{
	position: absolute;
	width: 77%; /* 578 / 750 * 100 */
	top: 7.53221%;/* 76 / 1009 * 100 */
}
.p-mode-local_thumb{
	position: absolute;
	width: 66.6666666%; /* 500 / 750 * 100 */
	top: 43%;/* 425 / 1009 * 100 */
}
.mov_wrap_bg{
	position: absolute;
	width: 69%; /* 518 / 750 * 100 */
	top: 42%;
}
/**Movie**/
.p-mode-yt .mov_wrap{
	position: relative;
	width: 100%;
	height: 0px;
	padding-bottom: 56.25%;
  z-index: 1;
  overflow: hidden;
}
.p-mode-yt .mov{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.p-mode-yt .movie_btn{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}
.mov{
	border-radius: 10px;
	position: relative;
	overflow: hidden;
}
.player_wrap{
	display: block;
	position: relative;
	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_lead{
	position: absolute;
	width: 65%; /* 488 / 750 * 100 */
	top: 74.9256689%;/* 756 / 1009 * 100 */
}
.p-mode-local h2,
.p-mode-local_thumb,
.p-mode-local_lead,
.mov_wrap_bg{
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}

/* ========================================
	dl
======================================== */
.p-mode-dl h2{
	position: absolute;
	width: 77%; /* 578 / 750 * 100 */
	top: 5.792%;/* 83 / 1433 * 100 */
}
.p-mode-dl_lead{
	position: absolute;
	width: 69.7333333%; /* 523 / 750 * 100 */
	top: 28.2623866%;/* 405 / 1433 * 100 */
	
}
.p-mode-dl_in{
	position: absolute;
	width: 66.6666666%; /* 500 / 750 * 100 */
	top: 39.4277739%;/* 565 / 1433 * 100 */
}
.p-mode-dl h2,
.p-mode-dl_lead,
.p-mode-dl_in{
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
}
.p-mode-dl_in li:nth-child(1){
	margin-bottom: 10%;
}
.p-mode-dl_chara{
	position: absolute;
	width: 42.1333333%; /* 316 / 750 * 100 */
	top: -11%;
	left: -10%;
}