@charset "UTF-8";
/*
* 認証ページ
------------------------------------------------*/
body.attest{
	background: #000;
	position: relative;
}
body.attest::before{
	content: "";
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-image: url(../image/attest/attest_top.png);
	background-position: left top;
	background-repeat: no-repeat;
}
body.attest::after {
	content: "";
	z-index: -1;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	background-image: url(../image/attest/attest_bottom.png);
	background-position: right bottom;
	background-repeat: no-repeat;
}
.attestWrap .attest-body{
	position: fixed;
	width: 90%;
	max-width: 640px;
	top: 50%;
	right: 50%;
	transform: translate(50%, -50%);
	color: #fff;
}
.attest-body .caution{
	align-items: center;
}
.attest-body .caution .comment{
	color: #fff;
}
.attest-body .copy{
	text-align: center;
	color: #fff;
}
.attest-body .enter{
	text-align: center;
}
.attest-body .enter li{
	max-width: 320px;
	margin: auto;
}
.attest-body .enter li a{
	position: relative;
	display: block;
	font-family: 'EB Garamond', serif;
	text-transform: uppercase;
	border: 2px solid #fff;
	color: #fff;
	line-height: 3;
	transition: .2s;
	letter-spacing: 0.08em;
	overflow: hidden;
}
.attest-body .enter li a::before{
	content: "";
	z-index: -1;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: -100%;
	background-color: #fff;
	transition: .2s;
}
.attest-body .enter li a:hover{
    color: #000;
}
.attest-body .enter li a:hover::before{
    left: 0;
}
@media only screen and (max-width: 735px){
	body.attest::before,
	body.attest::after{
		height: 113px;
		background-size: 320px 113px;
	}
	.attest-body .attest-header{
		margin-bottom: 5%;
	}
	.attest-body .caution{
		padding: 5% 0;
	}
	.attest-body .caution .imgArea{
		width: 15%;
	}
	.attest-body .caution .comment{
		font-size: 2.8vw;
		padding: 0 0 0 3%;
	}
	.attest-body .copy{
		font-size: 2.8vw;
	}
	.attest-body .enter{
		padding: 5% 0;
	}
	.attest-body .enter li a{
		font-size: 4.4vw;
		line-height: 2;
	}
}
@media only screen and (min-width: 736px) and (max-width: 1024px){
	body.attest::before,
	body.attest::after{
		height: 226px;
		background-size: 640px 226px;
	}
	.attest-body .attest-header{
		margin-bottom: 30px;
	}
	.attest-body .caution{
		padding: 20px 0 10px 0;
	}
	.attest-body .caution .imgArea{
		width: 48px;
	}
	.attest-body .caution .comment{
		font-size: 13px;
		padding: 0 0 0 10px;
	}
	.attest-body .copy{
		font-size: 12px;
	}
	.attest-body .enter{
		padding: 20px 0;
	}
	.attest-body .enter li a{
		font-size: 22px;
		line-height: 2;
	}
}
@media screen and (min-width: 1025px){
	body.attest::before,
	body.attest::after{
		height: 226px;
		background-size: 640px 226px;
	}
	.attest-body .attest-header{
		margin-bottom: 40px;
	}
	.attest-body .caution{
		padding: 20px 0 10px 0;
	}
	.attest-body .caution .imgArea{
		width: 53px;
	}
	.attest-body .caution .comment{
		font-size: 14px;
		padding: 0 0 0 15px;
	}
	.attest-body .copy{
		font-size: 14px;
	}
	.attest-body .enter{
		padding: 20px 0;
	}
	.attest-body .enter li a{
		font-size: 24px;
	}
}
/*
* エラーページ
------------------------------------------------*/
body.error{
	background: #000;
	position: relative;
}
body.error::before{
	content: "";
	z-index: -1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-image: url(../image/attest/attest_top.png);
	background-position: left top;
	background-repeat: no-repeat;
}
body.error::after {
	content: "";
	z-index: -1;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	background-image: url(../image/attest/attest_bottom.png);
	background-position: right bottom;
	background-repeat: no-repeat;
}
.errorWrap .error-body{
	position: fixed;
	width: 90%;
	max-width: 640px;
	top: 50%;
	right: 50%;
	transform: translate(50%, -50%);
	color: #fff;
}
.error-body .commentArea .ttl{
	text-align: center;
}
.error-body .commentArea .ttl span{
	position: relative;
	display: inline-block;
	padding: 0 65px;
}
.error-body .commentArea .ttl span:before,
.error-body .commentArea .ttl span:after {
	position: absolute;
	top: calc(50% - 3px);
	width: 50px;
	height: 6px;
	content: '';
	border-top: solid 2px #fff;
	border-bottom: solid 2px #fff;
}
.error-body .commentArea .ttl span:before {
	left: 0;
}
.error-body .commentArea .ttl span:after {
	right: 0;
}
.error-body .commentArea .comment{
	text-align: center;
}
.error-body .enter{
	text-align: center;
}
.error-body .enter li{
	max-width: 320px;
	margin: auto;
}
.error-body .enter li a{
	position: relative;
	display: block;
	font-family: 'EB Garamond', serif;
	text-transform: uppercase;
	border: 2px solid #fff;
	color: #fff;
	line-height: 2;
	transition: .2s;
	letter-spacing: 0.08em;
	overflow: hidden;
}
.error-body .enter li a::before{
	content: "";
	z-index: -1;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: -100%;
	background-color: #fff;
	transition: .2s;
}
.error-body .enter li a:hover{
    color: #000;
}
.error-body .enter li a:hover::before{
    left: 0;
}
.error-body .copy{
	text-align: center;
	color: #fff;
}
@media only screen and (max-width: 735px){
	body.error::before,
	body.error::after{
		height: 113px;
		background-size: 320px 113px;
	}
	.error-body .error-header{
		margin-bottom: 5%;
	}
	.error-body .commentArea .ttl{
		font-size: 7vw;
		margin-bottom: 3%;
	}
	.error-body .commentArea .comment{
		font-size: 3.6vw;
	}
	.error-body .enter{
		padding: 8% 0;
	}
	.error-body .enter li a{
		font-size: 4.4vw;
		line-height: 2;
	}
	.error-body .copy{
		font-size: 2.8vw;
	}
}
@media only screen and (min-width: 736px) and (max-width: 1024px){
	body.error::before,
	body.error::after{
		height: 226px;
		background-size: 640px 226px;
	}
	.error-body .error-header{
		margin-bottom: 30px;
	}
	.error-body .commentArea .ttl{
		font-size: 36px;
		margin-bottom: 10px;
	}
	.error-body .commentArea .comment{
		font-size: 15px;
	}
	.error-body .enter{
		padding: 40px 0 60px 0;
	}
	.error-body .enter li a{
		font-size: 20px;
		line-height: 2;
	}
	.error-body .copy{
		font-size: 12px;
	}
}
@media screen and (min-width: 1025px){
	body.error::before,
	body.error::after{
		height: 226px;
		background-size: 640px 226px;
	}
	.error-body .error-header{
		margin-bottom: 30px;
	}
	.error-body .commentArea .ttl{
		font-size: 42px;
		margin-bottom: 10px;
	}
	.error-body .commentArea .comment{
		font-size: 16px;
	}
	.error-body .enter{
		padding: 40px 0 60px 0;
	}
	.error-body .enter li a{
		font-size: 24px;
	}
	.error-body .copy{
		font-size: 14px;
	}
}