body{
    background-color:#3cb37a;
}
h1{
    text-align:center;
}
button{
    font-size:20px;
    margin-left:10%;
    border-radius:50%;
    width:30%;
    height:10%;
    padding:3%;
}
p.info{
    font-size:20px;
}

div.text img{
    height:150px;
    width:200px;
    text-align:center;
}

@media (orientation: landscape) {
  body.asahi div#map  {width: 90vw; height: 44vw; margin: 0 auto;}
}
@media (orientation: portrait) {
  body.asahi div#map  {width: 96vw; height: 44vh; margin: 0 auto;}
}

p.#info {border: 1px solid #444422;
	}
div#map  {width: 44vw; height: 80vh; margin: 0 auto;}
button#push{width:80vw; height:5em;}
*.c{text-align:center;}
.login, .passcode {
  width: 20em; height: 10em; margin: 5em auto; border: 3px double black;
}
.hidden{display: none;}
.shrink{
    height:0; transition:0.5s; overflow: hidden; border: none; margin:0;}

div#stamp>button {
  width: 200px;
  height: 200px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  background-image:url('image/img.png');
}

button:hover {
 opacity: 0.7;
}

.hidden {
  display: none;
}

#mask {
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

#modal {
  background: #fff;
  width: 50%;
  padding: 24px;
  border-radius: 4px;
  color: red;
  position: fixed;
  top: 50%;
  left: 10%;
  right: 10%;
  text-align: center;
  margin: 0 auto;
  z-index: 2;
}