* {
  font-family: "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3"!important;
  box-sizing   : border-box!important;
}

html {
  background:#000;
  font-size: 62.5%; /*ベースを10pxにしています*/
}
body {
  background:#000!important;
  font-size: 1.0rem; /*10px*/
	margin: 0;
	padding: 0;
	/* background: url('/assets/img/welcome/a4.png') center center fixed no-repeat; */
}
h2,h3 {
  color:#FFF!important;
  text-align:center;
  padding:0!important;
  margin:0!important;
}
ul.check{
  color:#FFF!important;
}

.control{
  padding-top:1rem;
}

#inputbox{
  margin:0;
  text-align:left;
}
#inputbox p{
  margin-bottom:.3rem;
}
#play{ 
	margin-top:.6rem;
  margin-bottom:2rem;
  padding:.5rem; 
  color:#fff;
  font-size:1.2rem;
  background:#1253A4;
  width:100%;
  height:3rem;
  cursor: pointer;
}
input[type=text]{ 
  display:inline;
  font-size:.8rem;
  padding:.3rem;
  width:100%;
}
input[type=text]{
  width:100%;
}
#video{
  display:none;
	position: absolute;
	top: 0; 
	left: 0;
	min-width: 100%;
	min-height: 100%;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	z-index: -1;
}

#overlay{
	position: absolute;
	top: 0; 
	left: 0;
  bottom:0;
  right:0;
  padding-top:40%;
	background:#000;
  text-align:center;
  
  background-image: url('/assets/img/orientation.png'); 
  background-position: center center; 
  background-repeat: no-repeat;
  background-attachment: fixed;  
  z-index:100;  
}

#pause{
	position: absolute;
	top: 0; 
	left: 0;
  bottom:0;
  right:0;
	background:transparent;
  text-align:center;
  
  background-image: url('/assets/img/video-play.png')!important; 
  background-position: center center; 
  background-repeat: no-repeat;
  background-attachment: fixed;   
}

.mobile{
  display:none;
}

@media screen and (orientation: landscape) {
   /* 横向きの場合のスタイル */
   #overlay{
     display:none;
   }
}
@media screen and (orientation: portrait) {
   /* 縦向きの場合のスタイル */
   #overlay{
     display:block;
   }
}