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

.if{
	width: 100%;
	background-color: #FFF;
	padding: 0.5em;
	border: 1px solid #d3d3d3;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}
.if-zip{ width: 8em; }
.if-tel{ width: 14em; }
.if-10em{ width: 10em;}
.if-4em{ width: 4em; margin-right: 10px; }

.if4em{ width: 4em; margin-right: 10px; }
.if2em{ width: 4em; margin-right: 10px; }

.if90per{width: 90%;}
.if80per{width: 80%;}
.if70per{width: 70%;}
.if60per{width: 60%;}
.if50per{width: 50%;}
.if40per{width: 40%;}
.if30per{width: 30%;}
.if20per{width: 20%;}
.if8em{width: 8em;}

.if::placeholder{
	color: #D9D9D9;
}


.mform label{
	display: inline-block;
	padding: 0.5em 1em 0.5em 0;
}

.mform select{
	border: 1px solid #D9D9D9;
	padding: 0.5em;
	border-radius: 3px;
}

.consent{
	font-size: 1.2rem;
	margin-bottom: 40px;
}
label.consent{
	border: 2px solid #02ADE2;
	padding: 15px 25px;
	border-radius: 3px;
}
.consent input{
	margin-right: 5px;
}

.concent-note{
	margin: 25px 0;
}
.concent-note .material-icons{
	font-size: 1.5rem;
}




.form-footer{
	max-width: 800px;
	margin: 50px auto 0;
}
.btns-wrap{
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.btn-form{
	background-color: #E5E5E5;
	text-align: center;
	padding: 20px;
	line-height: 1;
	font-size: 1.4rem;
	transition-duration: 0.3s;
}
.btn-form-submit{
	flex-basis: 70%;
	background-color: #D90107;
	color: #FFF;
	
}
.btn-form-submit:hover{
	background-color: #FFBA00;
}
.btn-form-reset{
	flex-basis: 27%;
}
.btn-form-reset:hover{
	background-color: #D3D3D3;
}
.form-note{
	text-align: left;
	font-size: 1.2rem;
	margin: 30px 0;
	color: #979797;
}
.form-note li{
	margin: 1em;
	text-indent: -1em;
}
.form-note li:before{
	content: '・';
	font-family: "Osaka-mono", "MS Gothic", "monospace";
}





/*========================================
	
========================================*/
.mform th::after{
	content: "必須";
	font-weight: 500;
	background-color: #D90107;
	border-radius: 3px;
	color: #FFF;
	font-size: 1.1rem;
	line-height: 1;
	padding: 0.5em 0.5em;
	position: absolute;
	top: 7px;
	right: 7px;
}
.mform th.nini::after{
	content: "任意";
	background-color: #7D7D7D;
}
@media (min-width:768px){
	.mform th::after{
		top: 23px;
		right: 15px;
	}
}

.if{
	border-radius: 2px;
}