@charset "UTF-8";
/* CSS Document */

body {
	animation: fadein 3s forwards;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}
h1{
	margin-left: 3em;
}
.h1_font {
	font-size:  0.6em;
}
#door {
	display: flex;
	height:80vh;
}
.door_inner {
	display: flex;
	justify-content: center;
	width: 80%;
	margin: auto;
	padding: 0;
}
li{
	list-style: none;
}

.door01,.door02 {
	width: 45%;
}
.door02 img,.door01 img{
	width: 100%;
}
.open{
 display:block; 
 position:relative;
 text-decoration:none;
}
.open img{
  display:block;
  width:100%;
}
.open:before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  z-index:2;
  background:#fff;/*好みの色に変えてください。*/
  opacity:0;
  transition:0.3s;
}
.open:after{
  content:"OPEN";/*好みの文章に変更してください。*/
  display:block;
  color:#fff;
  line-height:48px;
  width:180px;
  border:solid 1px #fff;
  border-radius:5px;
  text-align:center;
  position:absolute;
  top:40%;
  left:50%;
  margin-top:-1em;
  margin-left:-90px;
  opacity:0;
  z-index:3;
  transition:0.3s;
  font-weight:bold;
  letter-spacing:0.2em;
}
.open:hover:before{
  opacity:0.5;
}
.open:hover:after{
  opacity:1;
  margin-top:-0.5em;
}

@media screen and (max-width: 600px) {
.door_inner {
	width: 100%;
}
.door01,.door02 {
	width: 50%;
}
h1{
	margin-left: 0;
}

}