@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

.mv_txt08{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
    z-index: 4;
}
.mv_txt09{
    position: absolute;
    top: 10%;
    right: 5%;
    width: 100%;
    text-align: right;
    z-index: 4;
}
.mv_txt09 img{
    width: 25%;
}

.mv_txt10{
    position: absolute;
    bottom: 10%;
    right: 5%;
    width: 100%;
    text-align: right;
    z-index: 4;
}
.mv_txt10 img{
    width: 25%;
}

.mv_txt11{
    position: absolute;
    top: 50%;
    text-align: center;
    width: 100%;
    z-index: 4;
    transform: translateY(-50%);
   
}
.mv_txt11 img{
    width: 45%;
}


.mv_txt12{
    position: absolute;
    bottom: 26%;
    left: 5%;
    text-align: left;
    width: 100%;
    z-index: 4;
   
}
.mv_txt12 img{
    width: 25%;
}


.mv_txt13{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(0%,-50%);
    z-index: 4;
   
}
.mv_txt13 img{
    width: 45%;
}

.box{
    
    position: relative;
}
#box1{
}
#box2{
    /* background-image: url(nmove02.jpg);
    background-size: cover; */
}
#box2::after{
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.1);
}
#box3{
}
.box4{
    background-image: url(../img/nmove04.jpg);
    background-size: cover;
    height: 100vh;
}
.box4::after{
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.2);
}
#box6{
    background-image: url(../img/nmove06.jpg);
    background-size: cover;
}
#box6::after{
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
}

.video_wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin-top: -5vw;
}

.video_wrapper > video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100vw;
    min-height: 100vw;
}

#footer{
	background:#333;
	color:#fff;
	padding:40px;
	text-align:center;
}

#footer a{
	color: #fff;
}
/*========= ページネーションCSS ===============*/

.pagination {
	position:fixed;
	right:20px;
	top: 50%;
  	transform: translateY(-50%);
	font-size:1em;
	z-index: 10;
	list-style: none;
}

.pagination a {
	display:block;
	height:20px;
	margin-bottom:5px;
	color:#fff;
	position:relative;
	padding:4px;
}

.pagination a.active:after {
	box-shadow:inset 0 0 0 5px;
}

/*現在地表示のテキストの設定*/
.pagination a .hover-text {
	position:absolute;
	right:15px;
	top:0;
	opacity:0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	padding-right: 15px;
}

.pagination a:hover .hover-text {
	opacity: 1;
}

.pagination a:after {
	-webkit-transition:box-shadow 0.5s ease;
	transition:box-shadow 0.5s ease;
	width:10px;
	height:10px;
	display: block;
	border:1px solid;
	border-radius:50%;
	content:"";
	position: absolute;
	margin:auto;
	top:0;
	right:3px;
	bottom:0;
}

/*768px以下は現在地表示のテキストを非表示*/
@media screen and (max-width:768px) { 
	.pagination a .hover-text{
		display: none;
	}	
}


@media(max-width:750px){
	.video_wrapper {
    position: relative;
    width: 100vw;
    height: auto;
    overflow: hidden;
    margin-top: 60px;
}

.box4 {
    background-image: url(../img/nmove04.jpg);
    background-size: cover;
    height: 43vh;
}
.mv_txt11 img {
    width: 85%;
}

}