@charset "UTF-8";

/* ---------------------------------------------

	年齢認証

-----------------------------------------------*/

.preload{ display: block;}

.preload.hide{ display: none;}

#underCheckWhole {

	display: none;

	position: absolute;

	height: 100%;

	width: 100%;

	left: 0px;

	top: 0px;

}



#underCheckWhole img{margin: 0 auto;}



.underageWrapper {

	display: table;

	border-collapse: collapse;

	border: none;

	position: fixed;

	z-index: 999999;

	/* height: 100%; */

	height: 100vh;

	width: 100%;

	left: 0px;

	top: 0px;

	background-color: #000;

	color: #FFF;

	text-align: center;

}

.underageWrapper>* {

	display: table-cell;

	vertical-align: middle;

	padding: 10px;

}

.underageWrapper .underage-memo {

		text-align: center;

	margin-bottom: 75px;

}

.underageWrapper .underage-caution {

	text-align: center;

	margin-bottom: 30px;

}



.underageWrapper .underage-buttons {

	margin-bottom: 40px;

		text-align: center;

}

.underageWrapper .underage-buttons li {

	display: inline-block;

	margin-right: 20px;

	margin-left: 20px;

}

.underageWrapper .underage-buttons a {

		position: relative;

	font-size: 2.4rem;

	line-height: 70px;

	color: #fff;

		border: 1px solid #FFF;

	display: inline-block;

		text-align: center;

	height: 70px;

	width: 235px;

		font-family: 'Noto Serif SC', serif !important;

		text-decoration: none;

}

.underageWrapper .underage-buttons a:after{

		position: absolute;

		top: 50%;

		margin-top: -4px;

		right: 35px;

		display: block;

		content: '';

		width: 8px;

		height: 8px;

		border-top: 1px solid #FFF;

		border-right: 1px solid #FFF;

		-webkit-transform: rotate(45deg);

		transform: rotate(45deg);

}



.underageWrapper .underage-buttons a:hover {

	color: #000;

		background: #FFF;

		opacity: 1;

}

.underageWrapper .underage-buttons a:hover:after{

		border-top: 1px solid #000;

		border-right: 1px solid #000;

}



.underageWrapper .underage-keep {

	margin-bottom: 110px;

		text-align: center;

}

.checkbox-input{

		display: none;

}

.checkbox-parts{

		font-size: 1.8rem;

		line-height: calc(44 / 18);

		letter-spacing: .16em;

		padding-left: 20px;

		position:relative;

		cursor: pointer;

		font-family: 'Noto Serif SC', serif !important;

}

.checkbox-parts::before{

		content: "";

		display: block;

		position: absolute;

		top: 50%;

		margin-top: -7px;

		left: 0;

		width: 12px;

		height: 12px;

		border: 1px solid #FFF;

}



.checkbox-input:checked + .checkbox-parts::after{

		content: "";

		display: block;

		position: absolute;

		top: 50%;

		margin-top: -6px;

		left: 1px;

		width: 12px;

		height: 12px;

		background: #FFF;

}



.underageWrapper .corpName {

	margin-top: 25px;

		text-align: center;

}



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



		.underageWrapper .underage-memo {

				width: 70%;

				max-width: 1026px;

				margin: 0 auto 8rem auto;

		}

		.underageWrapper .underage-caution {

				width: 80%;

				max-width: 1172px;

				margin: 0 auto 10% auto;

		}

		.underageWrapper .underage-buttons {

				margin-bottom: 8%;

				font-size: 3.4vw;

		}



		.underageWrapper .underage-buttons li {

				display:  block;

				margin: 0 auto;

		}

		.underageWrapper .underage-buttons li+li{ margin-top: 5%;}

		.underageWrapper .underage-buttons p{ text-align: center;}

		.underageWrapper .underage-buttons a {

				font-size: 3.4vw;

				line-height: 12vw;

				height: 12vw;

				width: 80%;

				margin: 0 auto;

		}



		.underageWrapper .underage-keep {

				margin-bottom: 11rem;

		}

		.checkbox-parts::before{

				margin-top: -1.0rem;

				width: 1.8rem;

				height: 1.8rem;

		}



		.checkbox-input:checked + .checkbox-parts::after{

				left: .2rem;

				margin-top: -.8rem;

				width: 1.8rem;

				height: 1.8rem;

		}

		.checkbox-parts{

			font-size: 2.8rem;

			line-height: calc(49 / 28);

			padding-left: 4rem;

			position:relative;

			cursor: pointer;

			font-family: 'Noto Serif SC', serif !important;

		}

		.underageWrapper .corpName {

				margin-bottom: 0px;

		}

		.underageWrapper .corpName img {

				width: 100%;

				max-width: 269px;

				margin: 0 auto;

		}



}