/*******************************
VRコンテンツページ Css
*******************************/

button.soundBtn{
	margin: 0;
    padding: 0;
    background: none;
    border: none;
	-webkit-transition: all 300ms 0s ease;
    transition: all 300ms 0s ease;
}
button.soundBtn:hover{
	opacity: .6;
}

/*下層Page 共通 */
#page.vrcontents .wrap-common{
	max-width: 1000px;
}

/*==== mobile スマホ用css ===*/
@media screen and (max-width: 1024px) {
	#page.vrcontents .wrap-common{
		width: 70%;
	}
}
/*==== mobile スマホ用css ===*/
@media screen and (max-width: 768px) {
}
/*==== mobile スマホ縦用css ===*/
@media screen and (max-width: 480px) {	
	#page.vrcontents .wrap-common{
		width: 90%;
	}
}
/*pageTop*/
.pageTop{
	margin-top: 0;
	padding-top: 100px;
    padding-bottom: 80px;
}
.pageTitle{
	margin: 0 auto 80px;
}

/*contents内*/
#page .contents{
	padding: 750px 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#page .contents .inner{
	background-color: rgba(255,255,255,0.9);
    border-radius: 20px;
    padding: 120px 80px;
}
#page .contents .inner .title{
	margin: 0 auto 100px;
	width: 100%;
}
#page .contents .inner .flex{
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
#page .contents .inner .flex .img{
	width: 50%;
	max-width: 500px;
}
#page .contents .inner .flex .txt{
	width: 45%;
	padding-left: 100px;
}
#page .contents .inner .btn{
	margin-top: 100px;
	max-width: 360px;
}

@media screen and (max-width: 1024px) {
	.pageTitle{
		margin-bottom: 50px;
	}
	#page .contents {
    	padding: 100px 0;
	}
	#page .contents.last{
		padding-bottom: 150px;
	}
	#page .contents .inner .flex .txt{
		padding-left: 60px;
	}
	#page .contents .inner .btn {
		margin-top: 60px;
	}
}
/*==== mobile スマホ用css ===*/
@media screen and (max-width: 768px) {
	#page .contents {
		padding: 80px 0;
	}
	#page .contents.last{
		padding-bottom: 130px;
	}
	#page .contents .inner {
		padding: 80px 50px;
	}
	#page .contents .inner .title{
		margin-bottom: 60px;
	}
	#page .contents .inner .flex .txt {
    	padding-left: 40px;
	}
	#page .contents .inner .btn{
		max-width: 250px;
	}
}
/*==== mobile スマホ縦用css ===*/
@media screen and (max-width: 480px) {
	.pageTop{
		padding-top: 80px;
		padding-bottom: 30px;
	}
	.pageTitle{
		margin-bottom: 30px;
	}
	#page .contents {
		padding: 30px 0;
	}
	#page .contents.last {
		padding-bottom: 100px;
	}
	#page .contents .inner {
		padding: 50px 30px;
		width: 80%;
    	margin: 0 auto;
	}
	#page .contents .inner .title {
		margin-bottom: 30px;
	}
	#page .contents .inner .flex .img {
    	width: 100%;
	}
	#page .contents .inner .flex .txt {
		/*padding-left: 0;*/
		padding: 10px 20px;
		margin-top: 10px;
	}
	#page .contents .inner .btn {
		margin-top: 20px;
	}
}


/*******************************
VRコンテンツページ 各コンテンツ Css
*******************************/
#page .contents.lower {
    padding: 150px 0;
}
#page .contents.lower .title{
	margin: 0 auto 100px;	
}

#page .contents.lower .btn {
    margin-top: 100px;
    max-width: 360px;
}

#page .contents .movieFlame{
	margin: 0 auto 150px;
    max-width: 960px;
}

@media screen and (max-width: 1024px) {
}
/*==== mobile スマホ用css ===*/
@media screen and (max-width: 768px) {
	#page .contents .movieFlame{
		width: 90%;
	}
}
/*==== mobile スマホ縦用css ===*/
@media screen and (max-width: 480px) {
	
	#page .contents.lower {
		padding: 100px 0;
	}
	#page .contents .movieFlame{
		width: 80%;
		margin-bottom: 50px;
	}
	#page .contents.lower .btn {
    	margin-top: 50px;
		max-width: 200px;
	}
}



/*******************************
下層Page オーディオボタン Css
********************************/
.block-vr .audio-btn {
    display: flex;
    justify-content: space-between;
    width: 102px;
    position: fixed;
    top: 150px;
    right: 25px;
    z-index: 9999;
}

@media screen and (max-width: 1200px) {
    .block-vr .audio-btn {
        width:90px;
    }
}
@media screen and (max-width: 960px) {
    .block-vr .audio-btn {
        top:45px;
        right: inherit;
        left: 30px;
    }
}
@media screen and (max-width: 576px) {
    .block-vr .audio-btn {
        top:25px;
        left: .875rem;
        width: 75px;
    }
}

.block-vr .audio-btn img {
    width: auto;
    height: 57px;
}

@media screen and (max-width: 1200px) {
    .block-vr .audio-btn img {
        height:50px;
    }
}

@media screen and (max-width: 576px) {
    .block-vr .audio-btn img {
        height:40px;
    }
}

.block-vr .audio-btn button {
    opacity: .5;
	cursor: pointer;
	margin: 0;
    padding: 0;
    background: none;
    border: none;
	outline: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: currentColor;
}

.block-vr .audio-btn button.is-active {
    opacity: 1;
}

/*******************************
下層Page 全画面video Css
********************************/
#opv-wrap{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
    z-index: 9999999999;
	width: 100vw;
	height: 100vh;
	background-color: #000;
	width: 100vw;
	height: 100vh;
}
video#opv{
	position: fixed;
	top: 0;
	left: 0;
	object-fit: cover;
	width: 100vw;
	height: 100vh;
	vertical-align: bottom;
	background-color: #000;
    z-index: 9999999999;
}

/*==== mobile スマホ縦用css ===*/
@media screen and (max-width: 768px) {
	video#opv{
		top: 50%;
		transform: translateY(-50%);
		height: auto;
	}	
}