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


*{
	padding:0;
	margin:0;
}

a{
	text-decoration: none;
}

body{
	-webkit-text-size-adjust: 100%;
	width: 100%;
	height:100%;
}

#wrapper{
	width:100%;
	height:100%;
	font-family: "Droid Sans",  YuGothic,"Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size:18px;
	font-weight:500;	
}

header{
	width:100%;
	height:20px;
	line-height: 20px;
	background: var(--main-color);
}

h1{
	text-align: center;
	color: #fff;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: clamp(10px , 3.1vw ,15px);
	font-weight: 500;
	letter-spacing: 0.2em;
}

h2{
	text-align: center;
    font-size: min(50px,11vw);
    font-family: 'Cinzel', serif;
    color: #fff;
}

main{
	width:100%;
	background: #fff;
}

.pc{
	display: inline;
}

.sp{
	display: none;
}


#maincontents{
	position:relative;
	display:flex;
	flex-direction: column;
}

#logo{
	width:min(80%,600px);
	height:auto;
	margin:0 auto;
}

#logo img , #r18icon img{
	width:100%;
	height:auto;
	vertical-align: middle;
}

#r18icon{
	width:min(12vw,60px);
	height:auto;
	margin:0 auto 5px;
}

#caution{
	width:92%;
	margin:0 auto 50px;
	text-align: center;
	color:#4D4D4D;
	font-size: clamp(10px,3.1vw,13px);
	line-height: 1.8em;
}

#btn_area{
	width:100%;
	padding:min(5%,40px) 0;
	margin-bottom: min(10vw,20px);
	box-sizing: border-box;
	position:relative;
	display: flex;
	justify-content: center;
	background: var(--main-color);
}

#btn_area::before{
	position: absolute;
	top:5px;
	width:100%;
	height:1px;
	content:"";
	background:#fff;
}

#btn_area::after{
	position: absolute;
	bottom:5px;
	width:100%;
	height:1px;
	content:"";
	background:#fff;	
}

.enter_btn{
	width:min(151px,calc((100% / 2) - 16vw));
	height:min(10vw,60px);
	margin:0 8vw;
	filter: drop-shadow(0 0 5px #000);
	transition:0.5s;
	
	text-align: center;
	line-height:1;
}

.enter_btn__top{
	font-size: clamp(1.5em , 8.4vw , 2.3em);
    display: block;
    line-height: 1;
	font-family:"Zen Old Mincho", serif;
	color:#fff;
	background:-webkit-linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%, rgba(204,204,204,1) 100%);
	background-clip:text;
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}

.enter_btn__bottom{
	font-size: clamp(0.5em,3.1vw,0.8em);
    display: block;
	font-family:"Zen Old Mincho", serif;
	color:#fff;
	background:-webkit-linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 75%, rgba(204,204,204,1) 100%);
	background-clip:text;
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}

.center_bar{
	width:1px;
	height:min(10vw,60px);
	background:linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.6) 20%,rgba(255,255,255,0.6) 80%,rgba(255,255,255,0) 100%);
}

.enter_btn:hover{
	opacity:0.7;
}

footer{
	width:100%;
	background:#fff;
	padding:2px 0;
}

#bannerarea{
	width:min(80%,1000px);
	margin:30px auto 20px;
}

#bannerarea > div{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom:5px;
}

.bannerlist_l{
	max-width:calc((100% - 8px) / 2);
	display: inline-block;
	margin:2px;
	text-align: center;
	line-height:0.5em;
}

.bannerlist{
	max-width:calc((100% - 12px) / 3);
	display: inline-block;
	margin:2px;
	text-align: center;
	line-height:0.5em;
}

 .bannerlist a{
    font-size: 9px;
	text-align: center;
	 color:#aaa;
}

.bannerlist_l table , .bannerlist table{
	width:100% !important;
	height:auto !important;
}

.bannerlist_l table tr , .bannerlist_l table th , .bannerlist_l table td , .bannerlist table tr , .bannerlist table th , .bannerlist table td{
	height:auto !important;
}

.bannerlist img , .bannerlist_l img{
	width:100% !important;
	height:auto !important;
	vertical-align: bottom;
	display: block;
}

#copyright{
	text-align: center;
	color:#4D4D4D;
	font-size: clamp(10px,3.1vw,13px);
}

@media screen and (max-width:1025px) and (min-width:771px){
} 

@media screen and (max-width:770px){
	main{
		background-position:center,center top,center bottom;
		height:calc(100vh - 20px);
	}
	
	.pc{
	display: none;
	}

	.sp{
		display: inline;
	}	

	#maincontents{
		top:50%;
		transform:translateY(-50%);
	}
	
	#logo{
		order:1;
		margin:0 auto min(10vw,100px);
	}
	
	#r18icon{
		order:3;
	}
	
	#caution{
		order:4;
	}
	
	#btn_area{
		order:2;
	}
		
	footer{
		padding:0;
	}
	
	#bannerarea{
		width: 94%;
	}
	
	.bannerlist_l{
		max-width:100%;
		width:fit-content;
	}
	
	.bannerlist{
		max-width:100%;
		width:fit-content;
	}
		
	.bannerlist img , .bannerlist_l img{
		width:100%;
		height:auto;
	}
}