* {
	margin: 0;
	padding: 0;
}
.vertical-align input,
.vertical-align select{
	vertical-align:middle;
}
.poscenter div{
	margin: 0 auto;
	text-align: center;
}

body{
	-webkit-text-size-adjust:100%;
	font-family: 'Noto Serif JP', serif;
	background-color: #001020;
}

img{
	vertical-align:top;
}

.displaynone {
	display: none;
}

.active {
	animation: fadein-keyframes 0.5s ease-in 0s 1 forwards;
}

.fontset{
	font-family: 'Noto Serif JP', serif;
}

.content{
	color:#000000;
	font-size: 3vw;
	margin: 0;
	padding: 0;
}
.contentbigger{
	color:#000000; font-size: 4.5vw;
	margin: 0;
	padding: 0;
}
.contentbiggest{
	color:#000000; font-size: 6vw;
	margin: 0;
	padding: 0;
}
.displaynone{
	display: none;
}

.active {
	animation: fadein-keyframes 0.5s ease-in 0s 1 forwards;
}

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 75%;
  padding: 50px;
  background-color: #DDDDDD;
  z-index: 2;

  box-shadow: 0vw 0vw 2vw 2vw #DDDDDD;


}
.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 1;
  cursor: pointer;
}



.blackpopup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.blackpopup.is-show {
  opacity: 1;
  visibility: visible;
}
.blackblack-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,1.0);
  z-index: 1;
  cursor: pointer;
}


@media (max-aspect-ratio: 1/1) {
.dispall {
	position:absolute;
	left:0vw;
	top:0vw;
	width:100%;
	height:350vw;
}

.dispafterall {
	position:absolute;
	left:0vw;
	top:0vw;
	width:100%;
	height:420vw;
}

.resetbtn {
	position:absolute;
	width:25vw;
	height:5vw;
	top:2vw;
	left:70vw;
	border:0.25vw solid #505050;
	background-color:#000000;
	color:#EEEEEE;
	border-radius:1.5vw;
	cursor:pointer;
}

.riddle01{
	position:absolute;
	top:10vw;
	left:15vw;
	width:70vw;
}

.q01{
	position:absolute;
	z-index:10;
	left:17vw;
	top:71vw;
	width:67vw;
	text-align:left;
	color:#374D95;
	font-weight:bold;
	font-size:4.5vw;
	cursor: default;
}

.message01{
	width:66vw;
}

.q01fog{
	position:absolute;
	z-index:10;
	left:15vw;
	top:10vw;
	width:71vw;
	font-size:4.5vw;
	cursor: default;
}

.fog01{
	width:71vw;
}

.riddle02{
	position:absolute;
	top:85vw;
	left:15vw;
	width:70vw;
}

.q02{
	position:absolute;
	z-index:10;
	left:17vw;
	top:146vw;
	width:67vw;
	text-align:left;
	color:#374D95;
	font-weight:bold;
	font-size:4.5vw;
	cursor: default;
}

.message02{
	width:66vw;
}

.q02fog{
	position:absolute;
	z-index:10;
	left:15vw;
	top:85vw;
	width:71vw;
	font-size:4.5vw;
	cursor: default;
}

.fog02{
	width:70vw;
}

.riddle03{
	position:absolute;
	top:160vw;
	left:15vw;
	width:70vw;
}

.q03img{
	position:absolute;
	top:221.5vw;
	width:60vw;
	left:20vw;
	z-index:2;
}

.q03{
	position:absolute;
	z-index:10;
	left:17vw;
	top:221vw;
	width:67vw;
	text-align:left;
	color:#374D95;
	font-weight:bold;
	font-size:4.5vw;
	cursor: default;
}

.q03after{
	position:absolute;
	z-index:10;
	left:42.2vw;
	top:221.8vw;
	width:50vw;
	text-align:left;
	color:#374D95;
	font-weight:bold;
	font-size:4.5vw;
	cursor: default;
}

.message03{
	width:66vw;
}

.q03fog{
	position:absolute;
	z-index:10;
	left:15vw;
	top:160vw;
	width:71vw;
	font-size:4.5vw;
	cursor: default;
}

.fog03{
	width:70vw;
}

.answer{
	position:absolute;
	top:235vw;
	left:15vw;
	width:70vw;
}

.password1{
	position:absolute;
	font-size:4vw;
	top:317vw;
	width:50vw;
	height:6vw;
	left:15vw;
	border:0.5vw solid #808080;
}

.checkbutton{
	position:absolute;
	font-size:4vw;
	top:317vw;
	width:15vw;
	height:7.1vw;
	left:70vw;
}

.result1{
	position:absolute;
	top:324vw;
	left:18vw;
	width:60vw;
	height:6vw;
	color:#E0E0E0;
}

.addmsg{
	position:absolute;
	z-index:10;
	left:10vw;
	top:335vw;
	width:80vw;
	color:#FFFFFF;
}

.message04{
	left:10vw;
	width:80vw;
}


.thanks{
	top:2vw;
	width:25vw;
}

}



@media (min-aspect-ratio: 1/1) {
.dispall {
	position:absolute;
	left:0vw;
	top:0vw;
	width:100%;
	height:270vw;
}

.dispafterall {
	position:absolute;
	left:0vw;
	top:0vw;
	width:100%;
	height:340vw;
}

.resetbtn {
	position:absolute;
	width:25vw;
	height:5vw;
	top:2vw;
	left:70vw;
	border:0.25vw solid #505050;
	background-color:#000000;
	color:#EEEEEE;
	border-radius:1.5vw;
	cursor:pointer;
}

.riddle01{
	position:absolute;
	top:10vw;
	left:25vw;
	width:50vw;
}

.q01{
	position:absolute;
	z-index:10;
	left:26.4vw;
	top:53.6vw;
	width:47.9vw;
	text-align:left;
	color:#374D95;
	font-weight:bold;
	font-size:3.2vw;
	cursor: default;
}

.message01{
	width:47.1vw;
}

.q01fog{
	position:absolute;
	z-index:10;
	left:25vw;
	top:10vw;
	width:50.7vw;
	font-size:3.2vw;
	cursor: default;
}

.fog01{
	width:50.7vw;
}

.riddle02{
	position:absolute;
	top:65vw;
	left:25vw;
	width:50vw;
}

.q02{
	position:absolute;
	z-index:10;
	left:26.4vw;
	top:108.6vw;
	width:47.9vw;
	text-align:left;
	color:#374D95;
	font-weight:bold;
	font-size:3.2vw;
	cursor: default;
}

.message02{
	width:47.1vw;
}

.q02fog{
	position:absolute;
	z-index:10;
	left:25vw;
	top:65vw;
	width:50.7vw;
	font-size:3.2vw;
	cursor: default;
}

.fog02{
	width:50vw;
}

.riddle03{
	position:absolute;
	top:120vw;
	left:25vw;
	width:50vw;
}

.q03img{
	position:absolute;
	top:163.9vw;
	width:42.9vw;
	left:28.55vw;
	z-index:2;
}

.q03{
	position:absolute;
	z-index:10;
	left:26.4vw;
	top:163.6vw;
	width:47.9vw;
	text-align:left;
	color:#374D95;
	font-weight:bold;
	font-size:3.2vw;
	cursor: default;
}

.q03after{
	position:absolute;
	z-index:10;
	left:44.34vw;
	top:164.0vw;
	width:35.7vw;
	text-align:left;
	color:#374D95;
	font-weight:bold;
	font-size:3.2vw;
	cursor: default;
}

.message03{
	width:47.1vw;
}

.q03fog{
	position:absolute;
	z-index:10;
	left:25vw;
	top:120vw;
	width:50.7vw;
	font-size:3.2vw;
	cursor: default;
}

.fog03{
	width:50vw;
}

.answer{
	position:absolute;
	top:175vw;
	left:25vw;
	width:50vw;
}

.password1{
	position:absolute;
	font-size:2.86vw;
	top:237vw;
	width:35.7vw;
	height:4.29vw;
	left:25vw;
	border:0.5vw solid #808080;
}

.checkbutton{
	position:absolute;
	font-size:2.86vw;
	top:237vw;
	width:10.7vw;
	height:5.3vw;
	left:64.7vw;
}

.result1{
	position:absolute;
	top:244vw;
	left:27.14vw;
	width:45vw;
	height:4.29vw;
	color:#E0E0E0;
}

.addmsg{
	position:absolute;
	z-index:10;
	left:20vw;
	top:255vw;
	width:60vw;
	color:#FFFFFF;
}

.message04{
	left:20vw;
	width:60vw;
}

.thanks{
	width:18.25vw;
}

}