#modal.overlay {
  display: none;
  position: fixed;
  top: -10px;
  left: 0;
  right: 0;
  bottom: -10px;
  background-color: rgba(0, 0, 0, .55);
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index:1000;
}
#modal .modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media screen and (min-width: 769px){
	#modal .modal div.main {
		width: 900px;
		background: linear-gradient(to bottom right, #47141b, #591e3b);
	}
	
	#modal .modal div.main div.logo {
		width:100%;
		padding:60px 150px;
		box-sizing:border-box;
	}
	
	#modal .modal div.main div.logo img {
		width:100%;
		height:auto;
		-webkit-backface-visibility: hidden;
	}
	
	#modal .modal div.main div.enter {
		position:relative;
		padding:30px 50px 50px;
		background:#fff;
		box-sizing:border-box;
	}
	
	#modal .modal div.main div.enter:before {
		position:absolute;
		top:0;
		left:0;
		content:"";
		width:100%;
		height:4px;
	    background: linear-gradient(to right, #d6c4a2 0%, #faf0e6 40%, #faf0e6 60%, #d6c4a2 100%);
	}
	
	#modal .modal div.main div.enter p {
		text-align:center;
		line-height:1.4;
		margin-bottom:30px;
		-webkit-font-smoothing: antialiased;
	}
	
	#modal .modal div.main div.enter ul {
		display:flex;
		justify-content: space-between;
		width:100%;
		box-sizing:border-box;
	}
	
	#modal .modal div.main div.enter ul li {
		border:2px solid #3c1427;
	}
	
	#modal .modal div.main div.enter ul li a {
		display:block;
		padding:0.5rem 1rem;
		width:14rem;
		color:#3c1427;
		font-size:0.9rem;
		line-height:1.3;
		text-align:center;
		text-decoration:none;
		box-sizing:border-box;
		cursor:pointer;
		-webkit-font-smoothing: antialiased;
	}
	
	#modal .modal div.main div.enter ul li a span {
		display:block;
		font-size:1.4rem;
	}
}

@media screen and (max-width: 768px){
	
	#modal .modal div.main {
		width:100%;
		background: linear-gradient(to bottom right, #47141b, #591e3b);
	}
	
	#modal .modal div.main div.logo {
		width:100%;
		padding:2rem;
		box-sizing:border-box;
	}
	
	#modal .modal div.main div.logo img {
		width:100%;
		height:auto;
		-webkit-backface-visibility: hidden;
	}
	
	#modal .modal div.main div.enter {
		position:relative;
		padding:2rem 3rem 3rem;
		background:#fff;
		box-sizing:border-box;
	}
	
	#modal .modal div.main div.enter:before {
		position:absolute;
		top:0;
		left:0;
		content:"";
		width:100%;
		height:4px;
	    background: linear-gradient(to right, #d6c4a2 0%, #faf0e6 40%, #faf0e6 60%, #d6c4a2 100%);
	}
	
	#modal .modal div.main div.enter p {
		text-align:center;
		line-height:1.7;
		margin-bottom:2rem;
	}
	
	#modal .modal div.main div.enter ul {
		width:100%;
		box-sizing:border-box;
	}
	
	#modal .modal div.main div.enter ul li {
		border:2px solid #3c1427;
		margin-bottom:1rem;
	}
	
	#modal .modal div.main div.enter ul li:last-child {
		margin:0;
	}
	
	#modal .modal div.main div.enter ul li a {
		display:block;
		padding:0.5rem 1rem;
		width:16rem;
		color:#3c1427;
		font-size:0.8rem;
		line-height:1.5;
		text-align:center;
		text-decoration:none;
		box-sizing:border-box;
		cursor:pointer;
	}
	
	#modal .modal div.main div.enter ul li a span {
		display:block;
		font-size:1.3rem;
	}
}