@charset "UTF-8";
/*******************************
06vrgogglesページ Css
*******************************/
.pageBg{
	background-color: #ffff5f;
}

/*pageTop*/
.pageTop{
	background-image: url("../img/pegetop-bg.jpg");
	padding-bottom: 0;
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    position: relative;
}
.pageTitle{
	width: 100%;
	margin-bottom: 0;
}
#page .contents .inner .flex{
	margin-top: 100px;
	margin-bottm: 100px;
}

/*qa*/
#page #qa.contents{
	padding: 0;
}
#page #qa.contents .accordion{
	padding: 50px 50px 100px;
	position: relative;
    margin-bottom: 80px;
}
#qa .accordion .question{
	position: relative;
}
#qa .accordion .question .btn{
	position: absolute;
	bottom: 0;
	width: 80px;
	height: 80px;
	margin-top: 0;
	border: solid 4px #ffbc1f;
    border-radius: 50%;
}
#qa .accordion.block3 .question .btn{
	border-color: #00a0e9;
}
#qa .accordion .question .btn:before, #qa .accordion .question .btn:after{
	content: "";
    width: 40px;
    height: 4px;
    background-color: #ffbc1f;
    position: absolute;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%) rotate(0);
	-webkit-transition: all 300ms 0s ease;
    transition: all 300ms 0s ease;
}
#qa .accordion.block3 .question .btn:before, #qa .accordion.block3 .question .btn:after{
    background-color: #00a0e9;
}
#qa .accordion .question .btn:after{
	transform: translate(-50%, -50%) rotate(90deg);
}
#qa .accordion .question.is-active .btn:before{	
	content: none;
}
#qa .accordion .question.is-active .btn:after{
	transform: translate(-50%, -50%) rotate(0deg);
}
#qa .accordion.block1 .question .btn{ right: 0;}
#qa .accordion.block2 .question .btn{ right: 35%;}
#qa .accordion.block3 .question .btn{ right: 0;}

.accordion .answer{
	overflow: hidden;
	display: none;
	padding-top: 50px;
	transition-duration: 0.4s;
}
.accordion .answer.is-open{
	display: block;
}
#qa .accordion .answer > .img:nth-child(n+2){
	margin: 100px auto 0;
}

#page #qa.contents .accordion .appList .item{
	padding: 0 20px;
}

/*movie*/
#page #movie.contents{
	padding: 100px 0 500px;
}
#page #movie.contents:after{
	content: "";
	background-image: url("../img/pegefoot-Obj.jpg");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
	z-index: -1;
}
.movieBox{
	margin: 0 auto;
	padding: 120px 0;
	max-width: 1600px;
	position: relative;
}
#movie.contents .movieBox:nth-child(n+2){
	margin-top: 100px;
}
.movieBox .bg{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: -1;
}
.movieBox .movie{
	/*position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
    width: 60%;
    margin: 0 auto;
}
.movieBox .mvtitle{
    /*position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);*/
	width: 60%;
	margin: 20px auto 0;
}

@media screen and (max-width: 1024px) {
	#qa .accordion .question .btn {
		width: 60px;
		height: 60px;
	}
	#qa .accordion .question .btn:before, #qa .accordion .question .btn:after {
		width: 30px;
	}
	#page #movie.contents {
		padding-bottom: 250px;
	}
}
/*==== mobile スマホ用css ===*/
@media screen and (max-width: 768px) {
	#page #qa.contents .accordion {
		padding: 30px;
		margin-bottom: 40px;
	}
	#qa .accordion .question .btn {
		width: 40px;
		height: 40px;
		border: solid 2px #ffbc1f;
	}
	#qa .accordion .question .btn:before, #qa .accordion .question .btn:after {
		width: 20px;
		height: 2px;
	}
	#qa .accordion .answer > .img:nth-child(n+2){
		margin-top: 30px;
	}
	#page .contents .inner .flex {
		margin-top: 30px;
	}
	#page #movie.contents {
		padding-bottom: 150px;
		padding-top: 50px;
	}
	#movie.contents .movieBox:nth-child(n+2) {
		margin-top: 50px;
	}
}
/*==== mobile スマホ縦用css ===*/
@media screen and (max-width: 480px) {
	#page .contents .inner .flex {
		margin-top: 20px;
	}
	#page #qa.contents .accordion {
		padding: 20px;
		margin-bottom: 20px;
		border-radius: 10px;
	}
	#qa .accordion .question .btn {
		width: 20px;
		height: 20px;
	}
	#qa .accordion .question .btn:before, #qa .accordion .question .btn:after {
    	width: 10px;
	}
	.accordion .answer {
		padding-top: 20px;
	}
	#qa .accordion .answer > .img:nth-child(n+2) {
		margin-top: 10px;
	}
	#page #qa.contents .accordion .appList .item {
		padding: 5px 20px;
	}
	#qa .accordion.block3 .answer .btn{
		margin-top: 30px;
		padding: 0 20px;
	}
	
	.movieBox {
		margin: 0 auto;
		padding: 30px 0;
	}
	#page #movie.contents {
		padding-bottom: 100px;
		padding-top: 20px;
	}
	#movie.contents .movieBox:nth-child(n+2) {
		margin-top: 20px;
	}
}