@charset "UTF-8";
:root{
	--body : #333;
	--link : #333;
	--red : #a5c13a;
	--gray : #e7e7e7;
}
/*--------------------------------------------
REGISTRATION
---------------------------------------------*/
#registration{
	letter-spacing : 0;
}
#registration input[type="text"] , #registration input[type="email"] , #registration select , #registration textarea{
	background-color : #cfcfcf;
	border : 0;
}
#registration select{
	background-image : url("../images/ui/icon/triangle.svg");
	background-repeat : no-repeat;
}
#registration dt label{
	display : flex;
	align-items : center;
}
#registration dt label:after{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	color : #fff;
	flex-shrink : 0;
	line-height : 1;
}
#registration dt label.required:after{
	content : "必須";
	background-color : var(--red);
}
#registration dt label:not(.required):after{
	content : "任意 ";
	background-color : #39f;
}
#registration .row{
	display : flex;
	justify-content : space-between;
}
#registration .address label{
	display : flex;
	align-items : center;
}
#registration .address span{
	flex-shrink : 0;
}
#registration .checkbox label span{
	cursor : pointer;
	display : flex;
	align-items : center;
}
#registration .checkbox label span:before{
	content : "";
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
}
#registration .checkbox label input[type="checkbox"]{
	opacity : 0;
	position : absolute;
	visibility : hidden;
}
#registration .checkbox label input[type="checkbox"]:checked ~ span:before{
	content : "\2713";
}
#registration .checkbox span:before{
	background-color : #cfcfcf;
	color : var(--red);
	font-weight : 700;
}
#registration .radio label{
	position : relative;
}
#registration .radio label input{
	display : none;
}
#registration .radio label span{
	display : flex;
	align-items : center;
	cursor : pointer;
}
#registration .radio label span::before{
	content : "";
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	border-radius : 50%;
}
#registration .radio label input:checked + span:after{
	content : "";
	display : block;
	position : absolute;
	border-radius : 50%;
}
#registration .radio span:before{
	background-color : #cfcfcf;
}
#registration .radio span:after{
	background-color : var(--red);
}
#registration .box{
	overflow-y : auto;
	border-color : #cfcfcf;
	border-style : solid;
}
#registration input[type="submit"] , #registration button{
	margin-left : auto;
	margin-right : auto;
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
}
#registration input[type="submit"]{
	background-color : var(--red);
	color : #fff;
}
#registration button{
	background-color : #cecece;
}
@media screen and (max-width: 768px){
	#registration .wrap{
		padding-top : calc( ( 38 - 7 ) * 100vw / 768 );
		padding-bottom : calc( 36 * 100vw / 768 );
	}
	#registration .texts p{
		font-size : 2.6rem;
		line-height : 1.54;
	}
	#registration .texts p + p{
		margin-top : 2.6rem;
	}
	#registration form{
		margin-top : calc( ( 52 - 7 ) * 100vw / 768 );
	}
	#registration dl > div + div{
		margin-top : calc( 45 * 100vw / 768 );
	}
	#registration dt label{
		font-size : 2.6rem;
		line-height : 1.5;
	}
	#registration dt label:after{
		width : calc( 70 * 100vw / 768 );
		height : calc( 30 * 100vw / 768 );
		margin-left : calc( 16 * 100vw / 768 );
		font-size : 2rem;
	}
	#registration dd{
		margin-top : calc( 17 * 100vw / 768 );
	}
	#registration input[type="text"] , #registration input[type="email"] , #registration select , #registration textarea{
		font-size : 2.6rem;
	}
	#registration input[type="text"] , #registration input[type="email"] , #registration select{
		height : calc( 70 * 100vw / 768 );
		padding-left : calc( 20 * 100vw / 768 );
		padding-right : calc( 20 * 100vw / 768 );
	}
	#registration .l , #registration .m , #registration textarea{
		width : 100%;
	}
	#registration .s{
		width : calc( 355 * 100% / 720 );
	}
	#registration .sp-s{
		width : calc( 300 * 100vw / 768 );
	}
	#registration .address label + label{
		margin-top : calc( 20 * 100vw / 768 );
	}
	#registration .address span{
		font-size : 2.6rem;
		margin-right : calc( 16 * 100vw / 768 );
	}
	#registration select{
		background-position : top 50% right calc( 29 * 100vw / 768 );
		background-size : auto calc( 22 * 100vw / 768 );
	}
	#registration .checkbox label{
		display : block;
	}
	#registration .checkbox label + label{
		margin-top : calc( 20 * 100vw / 768 );
	}
	#registration .checkbox span{
		font-size : 2.6rem;
	}
	#registration .checkbox span:before{
		width : calc( 40 * 100vw / 768 );
		height : calc( 40 * 100vw / 768 );
		margin-right : calc( 16 * 100vw / 768 );
	}
	#registration .radio label{
		display : block;
	}
	#registration .radio label + label{
		margin-top : calc( 20 * 100vw / 768 );
	}
	#registration .radio span{
		font-size : 2.6rem;
	}
	#registration .radio span:before{
		width : calc( 40 * 100vw / 768 );
		height : calc( 40 * 100vw / 768 );
		margin-right : calc( 16 * 100vw / 768 );
	}
	#registration .radio span:after{
		width : calc( 20 * 100vw / 768 );
		height : calc( 20 * 100vw / 768 );
		top : calc( 10 * 100vw / 768 );
		left : calc( 10 * 100vw / 768 );
	}
	#registration textarea{
		height : calc( 200 * 100vw / 768 );
	}
	#registration .comment{
		margin-top : calc( ( 90 - 7 ) * 100vw / 768 );
		font-size : 2.6rem;
		line-height : 1.54;
	}
	#registration .box{
		margin-top : calc( ( 72 - 7 ) * 100vw / 768 );
		border-width : calc( 4 * 100vw / 768 );
		padding-left : calc( 7 * 100vw / 768 );
		padding-right : calc( 7 * 100vw / 768 );
		padding-top : calc( ( 16 - 7 ) * 100vw / 768 );
		padding-bottom : calc( ( 16 - 7 ) * 100vw / 768 );
		height : calc( 454 * 100vw / 768 );
	}
	#registration .box p{
		font-size : 2.6rem;
		line-height : 1.54;
	}
	#registration .box p + p{
		margin-top : 2.6rem;
	}
	#registration .submits{
		margin-top : calc( 54 * 100vw / 768 );
	}
	#registration input[type="submit"] , #registration button{
		width : calc( 600 * 100vw / 768 );
		height : calc( 80 * 100vw / 768 );
		font-size : 2.6rem;
	}
	#registration button{
		margin-top : calc( 30 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#registration .wrap{
		padding-top : calc( 31px - 4px );
		padding-left : 90px;
		padding-right : 90px;
		padding-bottom : 59px;
	}
	#registration .texts p{
		font-size : 1.6rem;
		line-height : 1.31;
	}
	#registration .texts p + p{
		margin-top : 1.6rem;
	}
	#registration form{
		margin-top : calc( 30px - 4px );
	}
	#registration dl > div{
		display : flex;
		align-items : flex-start;
		padding-top : 21px;
		padding-bottom : 21px;
	}
	#registration dl > div.aic{
		align-items : center;
	}
	#registration dl > div + div{
		border-top : 1px solid #ccc;
	}
	#registration dt{
		flex-shrink : 0;
		width : 285px;
		padding-right : 20px;
		padding-left : 20px;
	}
	#registration dt label{
		justify-content : flex-end;
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#registration dt label:after{
		width : 70px;
		height : 23px;
		margin-left : 21px;
		font-size : 1.4rem;
	}
	#registration dl > div:not(.aic) dt{
		padding-top : 14px;
	}
	#registration input[type="text"] , #registration input[type="email"] , #registration select , #registration textarea{
		font-size : 1.6rem;
	}
	#registration input[type="text"] , #registration input[type="email"] , #registration select{
		height : 50px;
		padding-left : 25px;
		padding-right : 25px;
	}
	#registration dd{
		padding-right : 115px;
		flex-grow : 1;
	}
	#registration .l , #registration textarea{
		width : 100%;
	}
	#registration .m{
		width : 300px;
	}
	#registration .s{
		width : 240px;
	}
	#registration .address label + label{
		margin-top : 10px;
	}
	#registration .address span{
		font-size : 1.6rem;
		margin-right : 18px;
	}
	#registration select{
		background-position : top 50% right 19px;
		background-size : auto 14px;
	}
	#registration .checkbox{
		margin-left : -29px;
		display : flex;
		align-items : center;
		flex-wrap : wrap;
	}
	#registration .checkbox label{
		margin-left : 29px;
	}
	#registration .checkbox span{
		font-size : 1.6rem;
	}
	#registration .checkbox span:before{
		width : 20px;
		height : 20px;
		margin-right : 7px;
	}
	#registration .radio{
		margin-left : -29px;
		display : flex;
		align-items : center;
		flex-wrap : wrap;
	}
	#registration .radio label{
		margin-left : 29px;
	}
	#registration .radio span{
		font-size : 1.6rem;
	}
	#registration .radio span:before{
		width : 20px;
		height : 20px;
		margin-right : 7px;
	}
	#registration .radio span:after{
		width : 8px;
		height : 8px;
		top : 6px;
		left : 6px;
	}
	#registration textarea{
		height : 200px;
	}
	#registration .comment{
		margin-top : calc( 27px - 4px );
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#registration .box{
		margin-top : calc( 24px - 4px );
		border-width : 2px;
		padding-left : 22px;
		padding-right : 22px;
		padding-top : calc( 20px - 4px );
		padding-bottom : calc( 20px - 4px );
		height : 229px;
	}
	#registration .box p{
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#registration .box p + p{
		margin-top : 1.6rem;
	}
	#registration .submits{
		margin-top : 32px;
	}
	#registration input[type="submit"] , #registration button{
		width : 300px;
		height : 60px;
		font-size : 1.6rem;
	}
	#registration button{
		margin-top : 20px;
	}
}
/*# sourceMappingURL=../maps/registration.css.map */