/* ===== main .visual ===== */

main .visual {
	position: relative;
	margin: 0;
	height: 565px;
	background-image: none;
  background-size: auto;
	background-position: center top;
	background-attachment: fixed;
  background-repeat: no-repeat;
  overflow: hidden;
}

main .visual .bard {
	position: absolute;
	top: 160px;
	left: 50%;
	margin-left: -37.5%;
	width: 75%;
	height: auto;
}

main .visual .bard img {
	width: 100%;
	height: auto;
}

main .visual h1 {
	position: absolute;
	top: 112px;
	left: 50%;
	margin-left: -32%;
	width: 64%;
	height: auto;
	text-align: center;
}

main .visual h1 img {
	width: 100%;
	height: auto;
}

main .visual .wave {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height:50px;
	background-image:url("../img/main_visual_wave.png");
  background-size: auto;
  background-repeat: repeat-x;
}

main #movie {
  position: absolute;
}

main .background {
  height: 615px;
  background-image: url("../img/main_visual_bg.png");
  background-size: auto;
	background-position: center top;
	background-attachment: fixed;
  background-repeat: no-repeat;
  transition: opacity 2s;
  opacity: 0.99;
}

main .background.moviestart {
  opacity: 0;
}

@media (min-width: 576px) {

}

@media (min-width: 727px) {
	main .visual h1 {
		position: absolute;
		top: 112px;
		left: 0;
		margin-left: 0;
		width: 100%;
		height: 615px;
		text-align: center;
	}
	
	main .visual h1 img {
		width: auto;
		height: auto;
	}
}

@media (min-width: 768px) {
	
}

@media (min-width: 992px) {
	main {
		position: relative;
		padding-top: 100px;
	}

  .preview main {
		padding-top: 0px;
	}
  
	main .visual {
		position: relative;
		height: 615px;
		background-image: none;
		background-size: auto;
		background-position: center 100px;
		background-attachment: fixed;
		background-repeat: no-repeat;
    overflow: hidden;
	}

	main .visual .bard {
		position: absolute;
		top: 160px;
		left: 50%;
		margin-left: -397px;
		width: 794px;
		height: 208px;
	}

	main .visual h1 {
		position: absolute;
		top: 112px;
		left: 0;
		margin-left: 0;
		width: 100%;
		height: 615px;
		text-align: center;
	}
	
	main .visual h1 img {
		width: auto;
		height: auto;
	}

	main .visual .wave {
		position: absolute;
		bottom: 0px;
		width: 100%;
		height:50px;
		background-image:url("../img/main_visual_wave.png");
		background-size: auto;
		background-repeat: repeat-x;
	}
  
  main .background {
    width: 100%;
    height: 615px;
		background-image: url("../img/main_visual_bg.png");
		background-size: auto;
		background-position: center 100px;
		background-attachment: fixed;
		background-repeat: no-repeat;
    transition: opacity 2s;
    opacity: 0.99;
  }
  
  main .background.moviestart {
    opacity: 0;
  }
  
}
	
@media (min-width: 1200px) {
  
}

@media (min-width: 1366px) {
  main .background {
		background-size: 100%;
	}
	main .visual {
		background-size: 100%;
	}
}