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

.modal { position:fixed; display:none; z-index:99999; margin:0 auto; text-align:center;
background:#fff; border-radius:10px; align-content: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.modal .innr{ padding:5%; font-size: 90%; margin: 0 auto;}

.modal .innr .logo{ width:50%; margin:0 auto; margin-bottom:30px;}
.modal .innr .logo img{ width:100%;}

.leadtext{ color:#E62078; margin:20px 0; font-size:1.2em; font-weight:bold;}

.age-chk{ font-size:1.4em;}
.age-chk{}
.age-chk li a.close_modal:hover{ cursor:pointer;}
.age-chk li{ display:inline-block; margin-right:10px;}

.modal .innr .button {
	background:#E62078;
	line-height:100%;
	color:#fff;
	text-decoration:none;
	border-radius:4px;
	font-weight:bold;
}

.modal .innr .button a{ color:#fff; display:block; text-decoration:none;}

.modal .innr .button span.arrow{ display:block; padding:6px 6px 4px 24px; line-height:100%;
background:url(../../../common/arrow_M_W.png) no-repeat left 8px center; background-size:9px; color:#fff;}

.modal .innr .button span.arrow_P{ display:block; padding:6px 6px 4px 24px; line-height:100%;
background:url(../../../common/arrow_M_P.png) no-repeat left 8px center; background-size:9px; color:#fff;}

.age-chk li .button{ padding:10px; opacity:1;}
.age-chk li .button a:hover{ opacity:1;}

.age-chk li.li02 .button{background:#A2A2A2;}

@media screen and (max-width: 812px) {

.modal {
min-width: 310px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.modal{ font-size:80%;}

.modal .innr{ padding-top:8%;}

.modal .innr .logo{ width:80%; margin-bottom:20px;}
.modal p{ line-height:180%;}

.leadtext{ margin:10px 0 20px 0;}

.modal .innr .button { font-size: 0.8rem;}

}