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

.notice{
	margin:0 0 4%;
}

form {
    font-size: 1rem;
    margin: 1% 0 0;
}
dl {
    margin: 0 auto;
    overflow: hidden;
    padding: 2% 0;
    text-align: left;
    width: 780px;
}

dl:last-of-type{
	padding-bottom: 0;
}

dt {
	width: 240px;
	float:left;
}

dd {
	width:480px;
	float: right;
}

.required{
	font-size: 0.67rem;
	padding: 2px 3px 3px 5px;
	letter-spacing:3px;
	margin: 0 5px;
	vertical-align: middle;
	border-radius: 4px;
	line-height: 1em;
}

.checkbox{
	margin: 0 10px 0 0;
}

label{
	display:block;
	margin: 0 0 1%;
}

.text {
    padding: 4% 2%;
    width: 450px;
}

.text,
input[type=text]
{
    border-radius: 4px;
    -webkit-border-radius : 4px;
    -webkit-appearance : none;
}

.select_box {
	position: relative;
	width: 100%;
	display:block
}

.select {	
	width:calc(100% - 2%);
}

.select,
input[type=select]
{
	padding: 4% 2%;
	border-radius: 4px;
    -webkit-border-radius : 4px;
    -webkit-appearance : none;
}

.select_box i {
	position: absolute;
	top: 40%;
	right: 4%;
}

.textarea {
    height: 120px;
    padding: 4% 2%;
    width: 450px;
}

.textarea,
input[type=textarea]
{
    border-radius: 4px;
    -webkit-border-radius : 4px;
    -webkit-appearance : none;
}

#button_box{
	height: 200px;
	margin: 6% 0;
}

.button {
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    margin: 1% 2%;
    padding: 22px 0 22px 5px;
    transition: .3s;
    letter-spacing: 0.05em;
    width: 244px;
}

.button:after {
	content: '›';
    display: inline-block;
    margin:0 10px 0 -20px;
	float: right;
}

.back-button:after {
	content: '‹';
    display: inline-block;
    margin:0 -20px 0 10px;
	float: left;
}

.error{
	padding: 1%;
}

.completion_ttl{
	padding-top: 4%;
}

.completion_ttl .en{
	font-size: 8rem;
}

.completion_txt{
	padding:4% 0;
}

.short
{width:10%;}
/* =============================================================================
   Device
   ========================================================================== */

@media screen and (max-width: 768px){
	.notice{
		text-align: justify;
    	text-justify: inter-ideograph;		
	}
	dl{
		width: auto;
		padding: 4% 1%;
	}
	dl:last-of-type{
		padding-bottom: 0;
	}
	dt {
		width: auto;
		font-size: 0.88rem;
		float: none;
		margin: 0 0 2%;
	}
	dd {
		width: auto;
		font-size: 0.88rem;
		float: none;
	}
	.text{
		width: calc(96% - 2px);
	}
	.select{
		width: 100%;
	}
	.textarea{
		width: calc(96% - 2px);
	}
	#button_box{
		height: auto;
		margin: 12% 0;
	}
	.button{
		font-size: 0.88rem;
	}
	.completion_ttl .en{
		font-size: 4rem;
	}
	.short
	{width:10%;}
}