@charset "UTF-8";

/* ========================================
	change
======================================== */
.background01,
.background02{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 300ms;
	background: center center no-repeat;
	background-size: cover;
	z-index: -1;
}
.background-area.is-type01 .background01 {
	opacity: 1;
}
.background-area.is-type02 .background02 {
	opacity: 2;
}
.background01 {	
	background-image: url(../images/change/bg_cont01.jpg);
}
.background02 {	
	background-image: url(../images/change/bg_cont02.jpg);
}
.l-contents{
	padding-bottom: 0 !important;
}
.p-change_wrap .c-pagecatch{
	background: url(../images/change/bg_wave_t.png) no-repeat center 45px;	
}
.p-change_wrap .c-content_wrap{
	background: url(../images/change/bg_cont_yp.png) repeat-y top center;
}
@media screen and (min-width: 1920px) {
	.p-change_wrap,
	.p-change_wrap .c-pagecatch,
	.p-change_wrap .c-content_wrap{
		background-size:100% auto;
	}
}
.p-change_lead01{
	position: relative;
	width: 960px;
	margin: 0 auto;
	text-align: center;
	padding: 20px 0 33px 0;
}
.p-change-mv-bgstar01{
	top:-20px;
	left:-264px;
}
.p-change-mv-bgstar02{
	top:-20px;
	left:886px;
}
.p-change_wrap_bg{
	width: 100%;
	height: 762px;
	top:170px;
	position: absolute;
	background: url(../images/change/shaded_top.png) repeat-x top center;
}
@media screen and (min-width: 1920px) {
	.p-change_wrap_bg{
		background-size:100% 762px;
	}
}
/* ========================================
	tab
======================================== */
.p-change-tab01 .tabnv{
	width: 680px;
	margin: 0 auto;
	overflow: hidden;
	margin-top: -10px;
	padding-top: 10px;
}
.p-change-tab01 .tabnv li{
	width: 340px;
	height: 70px;
	float: left;
	cursor: pointer;
}
.p-change-tab01_wrap {
	height: 360px;
}
.p-change-tab01_cont01, .p-change-tab01_cont02{
	background-color: #fff;
	width: 1040px;
	padding: 67px 0 40px 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.p-change-tab01_cont01 .Inner, .p-change-tab01_cont02 .Inner{
	width: 940px;
	margin: 0 auto;
}
.p-change-tab01_cont01 dl, .p-change-tab01_cont02 dl{
	width: 290px;
	position: relative;
	float: left;
}
.p-change-tab01_cont01 dt, .p-change-tab01_cont02 dt{
	margin-bottom: 18px;
}
.tab01_ico{
	position: absolute;
	display: block;
	top:-26px;
	left: -30px;
}
.tab01-arr{
	width: 325px !important;
	padding-right: 35px;
	background: url(../images/change/tab01_arr.png) no-repeat 290px 76px;
}
.p-change-txt_more{
	width: 930px;
	margin: 0 auto;
	text-align: right;
	padding:20px 0 66px 0;
}

/* ========================================
	singer
======================================== */

.p-change-singer{
	position: relative;
	background: url(../images/change/bg_wave_b.png) no-repeat top center;
}
@media screen and (min-width: 1920px) {
	.p-change-singer{
		background-size:100% auto;
	}
}
.p-change-singer_yayoi{
	position: relative;
	height:614px;
}
.p-change-singer_yayoi h3{
	padding: 100px 0 40px 0;
}
.p-change-singer_h01{
	position: absolute;
	top:226px;
	left:34px;
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(30px);
	transform: translateY(30px);
	transition:
		opacity 300ms 500ms,
		-webkit-transform 400ms 500ms,
		transform 400ms 500ms;
}
.p-change-singer_yayoi.is-animation .p-change-singer_h01,
.no-js .p-change-singer_yayoi .p-change-singer_h01 {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.p-change-singer_lead01{
	position: absolute;
	top:347px;
	left:47px;
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(30px);
	transform: translateY(30px);
	transition:
		opacity 300ms 1000ms,
		-webkit-transform 400ms 1000ms,
		transform 400ms 1000ms;
}
.p-change-singer_yayoi.is-animation .p-change-singer_lead01,
.no-js .p-change-singer_yayoi .p-change-singer_lead01 {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.singer_chara, .singer_name{
	display: block;
	position: absolute;
}
.p-change-singer_yayoi .singer_chara{
	top:-50px;
	left:469px;
	z-index: 100;
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(30px);
	transform: translateY(30px);
	transition:
		opacity 300ms,
		-webkit-transform 400ms,
		transform 400ms;
}
.p-change-singer_yayoi.is-animation .singer_chara,
.no-js .p-change-singer_yayoi .singer_chara {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.p-change-singer_yayoi .singer_name{
	top:28px;
	left:550px;
	z-index: 10;
}
.p-change-singer_bg01, .p-change-singer_bg02{
	z-index: 50;
	width: 100%;
	height: 448px;
	position: absolute;
}
.p-change-singer_bg01{
	background: url(../images/change/singer_bg_p01.png) no-repeat center 0;
	top:365px;
}
.p-change-singer_bg02{
	background: url(../images/change/singer_bg_p02.png) no-repeat center 0;
	top:1265px;
}
@media screen and (min-width: 1920px) {
	.p-change-singer_bg01, .p-change-singer_bg02{
		background-size:100% auto;
		height: 1000px;
	}
}
.p-change-singer_tsukiko{
	position: relative;
	height: 396px;
}
.p-change-singer_lead02{
	position: absolute;
	top:200px;
	left:535px;
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(30px);
	transform: translateY(30px);
	transition:
		opacity 300ms 500ms,
		-webkit-transform 400ms 500ms,
		transform 400ms 500ms;
}
.p-change-singer_tsukiko.is-animation .p-change-singer_lead02,
.no-js .p-change-singer_tsukiko .p-change-singer_lead02 {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.p-change-singer_lead03{
	position: absolute;
	top:298px;
	left:535px;
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(30px);
	transform: translateY(30px);
	transition:
		opacity 300ms 1000ms,
		-webkit-transform 400ms 1000ms,
		transform 400ms 1000ms;
}
.p-change-singer_tsukiko.is-animation .p-change-singer_lead03,
.no-js .p-change-singer_tsukiko .p-change-singer_lead03 {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.p-change-singer_tsukiko .singer_chara{
	top:-10px;
	left:-65px;
	z-index: 100;
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(30px);
	transform: translateY(30px);
	transition:
		opacity 300ms,
		-webkit-transform 400ms,
		transform 400ms;
}
.p-change-singer_tsukiko.is-animation .singer_chara,
.no-js .p-change-singer_tsukiko .singer_chara {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.p-change-singer_tsukiko .singer_name{
	top:60px;
	left:-30px;
	z-index: 10;
}
.p-change-singer_lead{
	padding: 220px 0 10px 525px;
}
.p-change-singer_hotaru{
	position: relative;
}
.p-change-singer_hotaru .singer_chara{
	top:15px;
	left:435px;
	z-index: 100;
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(30px);
	transform: translateY(30px);
	transition:
		opacity 300ms,
		-webkit-transform 400ms,
		transform 400ms;
}
.p-change-singer_hotaru.is-animation .singer_chara,
.no-js .p-change-singer_hotaru .singer_chara {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.p-change-singer_hotaru .singer_name{
	top:-27px;
	left:523px;
	z-index: 10;
}

/* ========================================
	tab02
======================================== */

.p-change-tab02_wrap{
	margin-top: 600px;
	background: url(../images/change/bg_star01.png), url(../images/change/bg_wave_t02.png) ;
	background-repeat: no-repeat;
	background-position: center 20px, center 365px;
	position: relative;
	z-index: 200;
}
.p-change_wrap_btm{
	background: url(../images/change/shaded_btm.png) repeat-x center 370px;
}
@media screen and (min-width: 1920px) {
	.p-change_wrap_btm{
		background-size:100% 1180px;
	}
}
.p-change-choise_catch{
	width: 960px;
	margin: 0 auto;
}
.p-change-tab02{
	background: url(../images/change/tab02_bg.png);
	background-repeat: no-repeat;
	background-position: center 60px;
}
@media screen and (min-width: 1366px) {
	.p-change-tab02_wrap{
		background-size:auto auto, 100% auto;
	}
}
.p-change-tab02 .tabnv{
	width: 441px;
	margin: 0 auto;
	overflow: hidden;
	margin-top: -10px;
	padding-top: 10px;
}
.p-change-tab02 .tabnv li{
	float: left;
	width: 220px;
	height: 104px;
	cursor: pointer;
}
.p-change-tab02 .tabnv .tabnv_switch2-1{
	width: 221px;
}
.tabnv_switch2-1 img,
.tabnv_switch2-2 img {
	transition: none;
}
.p-change-tab02_tabwrap {
	width: 494px;
	margin: 0 auto;
	height: 340px;
}
.p-change-tab02_cont01, .p-change-tab02_cont02{
	padding: 20px 0 80px 0;
}
.p-change-tab02_cont01{
	background:url(../images/change/tab02_01_bg.png) no-repeat top center;
}
.p-change-tab02_cont02{
	background:url(../images/change/tab02_02_bg.png) no-repeat top center;
}
.tab02_name{
	position: absolute;
	left: 7px;
	top: 215px;
}
.p-change-tab02 .Inner{
	width: 400px;
	height: 240px;
	margin: 0 auto;
}
.p-change-tab02_lead{
	position: relative;
	margin: -20px 0 0 120px;
}
.p-top-modalmovie{
	width: 440px !important;
}
/**Movie**/
.mov_wrap{
	position: relative;
	width: 400px;
	height: 240px;
	margin: 0 0 0 3px;
	overflow: hidden;
}
.mov{
	margin-left: -3px;
}
.l-modal_inner .ytp-thumbnail-overlay-image {
	-moz-background-size: 410px auto !important;
	-webkit-background-size: 410px auto !important;
	background-size: 410px auto !important;
}
.l-modal_movie:before {
	padding-top: 0;
}

/* ========================================
	live
======================================== */

.p-change-live_wrap{
	padding-bottom: 200px;
	background: url(../images/change/bg_cont_yp.png) repeat-y center top;
}
@media screen and (min-width: 1366px) {
	.p-change-live_wrap{
		background-size:100% auto;
	}
}
.p-change-live01{
	position: relative;
	width: 880px;
	margin: 0 auto;
	padding: 70px 0 110px 0;
	background: url(../images/change/live_p01.png) no-repeat right 50px;
}
.p-change-live01 dt{
	margin-bottom: 30px;
}
.p-change-live02{
	width: 980px;
	margin-top: -65px;
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
.p-change-live02 .u-left, .p-change-live02 .u-right{
	width: 460px;
	padding-bottom: 10px;
}
.p-change-live02 .u-left{
	background: url(../images/change/live_bg02.png) no-repeat 10px 0;
}
.p-change-live02 .u-right{
	background: url(../images/change/live_bg03.png) no-repeat 10px 0;
}
.p-change-live02 dt{
	position: relative;
	z-index: 10;
}
.p-change-live02 dd{
	position: relative;
	z-index: 1;
	margin-top: -40px;	
}
.p-change-live02 .u-left dd{
	padding-left: 40px;
}
.p-change-live02 .u-right dt{
	padding-left: 30px;
}
.p-change-bgstar{
	display: block;
	position: absolute;
}
.p-change-bgstar01{
	z-index: 1000;
	top:-35px;
	left:318px;
}
.p-change-bgstar02{
	top:-33px;
	left:363px;
}
.p-change-bgstar03{
	top:-33px;
	left:-140px;
}
.p-change-bgstar04{
	top:280px;
	left:960px;
}