*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
	color: #fff;
}

ul {
  list-style-type: none;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #000;
  color: white;
}

.slider {
  width: 100%;
  height: 100vh;
  position: relative;
  text-transform: uppercase !important;
}


#navi-cont {
	color: #fff;
	position: relative;
	z-index: 9990;
}

#navi-cont ul {
	width: 100%;
	height: 100%;
	display: flex;
}

.navi-in1 {
	position: fixed;
    top: 30px;
    left: 40px;
    font-size: 0.8em;
}

#navi-cont ul .navi-in3 {
	position: fixed;
    bottom: 30px;
    left: 40px;
    font-size: 0.8em;
    z-index: 999;
}



.content {
	display: flex;
  justify-content: center;
  align-items: center;
}

.copylight {
	position: fixed;
    text-align: center;
    bottom: 30px;
    color: #fff;
    width: 100%;
}

.copylight small {
	margin: 0 auto;
	font-size: 0.6em;
}

.mb100{
			margin-bottom: 100px;
		}	
		.swiper-container{
			text-align: center;
		}


.swiper-container .swiper-slide img {
			max-width: 100%;
			height: auto;
			margin-bottom: 10px;
		}
.prettyprint {
			border: none;
			background: #fafafa;
			color: #697d86;
		}

.title {
			position: fixed;
		    left: 40px;
		    bottom: 60px;
		    z-index: 9999;
		    height: 50px;
		    width: auto;
		    top: calc(80% - 50px/2);
			}
			
.title .tbox {
			font-size: 0.8em;
			color: #fff;
			}
			
.title .tbox span {
			display: block;
			font-size: 0.8em;
			color: #fff;
			margin-bottom: -10px;
			}




/*

=======================================

media query

=======================================

*/

@media screen and (max-width: 749px) { 
			#navi-cont {
			color: #fff;
			position: relative;
			z-index: 9990;
			
			}

			#navi-cont ul {
			width: 100%;
			height: 100%;
			display: flex;
			
			}

			.navi-in1 {
			position: fixed;
			top: 20px;
			left: 20px;
			font-size: 0.8em;
			}

			#navi-cont ul .navi-in3 {
			position: fixed;
			bottom: 20px;
			left: 20px;
			font-size: 0.8em;
			}
			
			#navi-cont .copylight {
			position: fixed;
		    bottom: 20px;
		    width: 100%;
		    }

			#navi-cont .copylight small {
			margin: 0 auto;
			font-size: 0.6em;
			color: #fff;
			}
			
			.title {
			position: fixed;
			left: 20px;
			bottom: 60px;
			z-index: 9999;
			}
			
			.title .tbox {
			font-size: 0.8em;
			color: #fff;
			}
			
			.title .tbox span {
			display: block;
			font-size: 0.8em;
			color: #fff;
			margin-bottom: -10px;
			}
			
}


@media screen and (min-width: 53em) {
  .slider {
      height: 100vh;
  }
}

.mmSlider {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

canvas {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
}

nav a {
  text-decoration: none;
  position: absolute;
  top: 46vh;
  z-index: 1;
  padding: 20px;
  transition: 0.3s;
  background: black;
  color: white;
}

nav a.next {
  right: 10vw;
  font-size: 12px;
}

nav a.prev {
  left: 10vw;
  font-size: 12px;
}

@media screen and (max-width: 53em) {
	  nav a {
	      top: auto;
	      bottom: 25rem;
	  }
	  nav a.next {
	  right: 0vw;
	  font-size: 10px;
	}

	nav a.prev {
	  left: 0vw;
	  font-size: 10px;
	
	}

}