@charset "utf-8";
/*----- Modal -----*/
.modal {
	height: 100%;
	position: fixed;
	top: 0;
	display: none;
	width: 100%;
	z-index: -1;
}
.modalOverlay {
	background: rgba(0, 0, 0, .9);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 10;
}
.modalConts,
.modalOpenState.active {
	left: 50%;
	position: absolute;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	z-index: 11;
	width: 92%;
}
.modalOpenState.active {
	/*top: 100%;*/
	z-index: 99999;
}
.modalClose {
	cursor: pointer;
	position: absolute;
	top: 30px;
	right: 30px;
	width: 90px;
	height: 90px;
	z-index: 999999;
}
.modalClose:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/btn-modal-close.png) no-repeat center center / contain;
}

/*** modal active ***/
body.active {
	overflow: hidden;
	position: fixed;
	top: 0;
}
#wrapper #age_form.active,
#wrapper #enter.active,
#wrapper #enter_none.active {
	position: relative;
	z-index: 999;
}

/*----- Contents -----*/
.modalConts .box .boxInner {
	color: #fff;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 2%;
}
.modalConts .box .message {
	margin-bottom: 2em;
}
.modalConts .box .message p {
	line-height: 2.2;
	margin-bottom: 1em;
}
.modalConts .box .message .ttl {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 1.5em;
	text-align: center;
}
/*----- Notice -----*/
.modalConts .box#gdprNotice .message .ttl {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 1.5rem;
}
.modalConts .box#gdprNotice .message p a {
	color: #fff;
}
.modalConts .box#gdprNotice .message p a:hover {
	text-decoration: none;
}
.modalConts .box#gdprNotice nav ul {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	width: 100%;
}
.modalConts .box#gdprNotice nav ul li {
	text-align: center;
	width: 45%;
}

/*----- Refuse -----*/
.modalConts .box#gdprRefuse {
	display: none;
}
.modalConts .box#gdprRefuse .ttl {
	color: #f00;
}

/*** active ***/
.modal.active {
	display: block;
	z-index: 9999;
}

/*** PC ***/
@media only screen and (min-width: 751px) {
	.modalConts,
	.modalOpenState.active {
		margin: auto;
		max-width: 850px;
	}
	.modalConts .box .boxInner {
		overflow-y: auto;
	}
	.modalConts .box .message {
		text-align: center;
	}
	.modalConts .box#gdprNotice nav ul {
		margin: auto;
		width: 360px;
	}
}

@media only screen and (max-width: 750px) {
  .modalClose {
  	top: calc(30 / 750 * 100vw);
  	right: calc(30 / 750 * 100vw);
  	width: calc(90 / 750 * 100vw);
  	height: calc(90 / 750 * 100vw);
  }
  .modalConts {
    height: 100%;
    overflow: hidden;
  }
  .modalOpenState.active {
  	left: 50%;
  	position: relative;
  }
	.modalConts .box {
    max-height: 100%;
    width: calc(100% + 30px);
    padding-right: 30px;
    overflow: auto;
  }
	.modalConts .box .boxInner {
		padding: calc(90 / 750 * 100vw) 2%;
	}
  .modalConts .box .boxInner {
    font-size: 3.2vw;
    overflow: visible;
  }
}