body {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

main {
	flex: 1 0 auto;
}

h5{
	font-weight:bold;
}

#overlay{
	display: none;
	width: 100%;
	height:100%;
	text-align: center;
	position: fixed;
	top: 0;
	z-index: 100;
	background: white;
}

#overlay2{
	display: none;
	width: 100%;
	height:100%;
	text-align: center;
	position: fixed;
	top: 0;
	z-index: 100;
	background: rgba(0,0,0,0.7);
	color:white;
}

#overlay3{
	display: none;
	width: 100%;
	height:100%;
	text-align: center;
	position: fixed;
	top: 0;
	z-index: 100;
	background: rgba(0,0,0,0.7);
	color:white;
}



.leVerticalTremble span { animation-name: leVerticalTremble; animation-iteration-count: infinite }
@keyframes leVerticalTremble {
    3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) }
    6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) }
    9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) }
}

.cd-modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
}
.cd-modal.visible {
  opacity: 1;
  visibility: visible;
}

.cd-transition-layer .bg-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-2%);
  height: 100%;
  /* our sprite is composed of 25 frames */
  width: 2500%;
  background: url(../img/ink.png) no-repeat 0 0;
  background-size: 100% 100%;
}

@keyframes cd-sequence {
  0% {
    transform: translateY(-50%) translateX(-2%);
  }
  100% {
    transform: translateY(-50%) translateX(-98%);
  }
}

/*フルスクリーン用*/
#target:-webkit-full-screen{
	position : absolute ;
	left     : 0 ;
	top      : 0 ;
	width    : 100% ;
	height   : 100% ;
}
#target:-moz-full-screen {
	position : absolute ;
	left     : 0 ;
	top      : 0 ;
	width    : 100% ;
	height   : 100% ;
}
#target:-ms-fullscreen {
	position : absolute ;
	left     : 0 ;
	top      : 0 ;
	width    : 100% ;
	height   : 100% ;
}
#target:fullscreen {
	position : absolute ;
	left     : 0 ;
	top      : 0 ;
	width    : 100% ;
	height   : 100% ;
}