@charset "utf-8";

/* PC：1260px　SP：320px想定 */

/*------------------------------------------
form
------------------------------------------*/
.contents.form-contents{
	padding: min(9.5238%, 12em) min(7.1428%, 9.0em); /* 120px / 1260px */
}

.error_coution{
	margin-bottom: 1.0em;
	display: block;
	font-size: 1.8em;
}

.form-area > div{
	margin-top: 1.6em; /* 30px/18px */ 
	width: 100%;
	font-size: 1.8em;
	letter-spacing: 0.03em;
}
.form-area fieldset{
	width: 100%;
	border: none;
}
.form-area > div label,
.form-area > div fieldset legend{
	display: block;
	font-weight: bold;
}
.form-area fieldset label{
	display: inline-block;
	font-weight: normal;
}

.fw-bold{ font-weight: bold!important; }
.fw-normal{ font-weight: normal!important; }


span.required{
	color: #d80d18;
}
span.format-txt{
	margin-left: 1.0em;
	font-size: 0.8em;
}

input[type="text"],
input[type="tel"],
input[type="email"]{
	width: 100%;
	padding: 0.2em;
	border: solid 1px #a1a1a1;
	border-radius: 3px;
}
input[type="text"]#reason_chk_other{
	margin-left: 1.5em;
	width: calc(100% - 1.5em);
}

textarea{
	width: 100%;
	height: 8em;
	padding: 0.2em;
	border: solid 1px #a1a1a1;
	border-radius: 3px;
}
.selectbox{
	position: relative;
}
select{
	width: 100%;
	padding: 0.2em calc(0.2em + 24px) 0.2em 0.2em;
	border: solid 1px #a1a1a1;
	border-radius: 3px;
	cursor: pointer;
}
.selectbox::after{
	content: "";
	position: absolute;
	top: calc(50% - 6px);
	right: 8px;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	border-top: 12px solid #000;
	pointer-events: none;
}

input[type="radio"]{
	position: relative;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 1.0em;
	height: 1.0em;
	border: 1px solid #000;
	border-radius: 50%;
	vertical-align: -3px;
}
input[type="radio"]:checked:before{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background: #000;
}
input[type="radio"] + label{
	margin-right: 1.0em;
}

input[type="checkbox"]{
	position: relative;
	margin-right: 0.3em;
	width: 1.0em;
	height: 1.0em;
	border: solid 1px #000;
	border-radius: 3px;
	vertical-align: -5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	vertical-align: -3px;
}
input[type="checkbox"] + label{
	margin-right: 1.0em;
}
input[type="checkbox"]:checked:before{
	position: absolute;
	top: calc(50% - 0.3em);
	left: calc(50% + 0.2em);
	transform: translate(-50%, -50%) rotate(45deg);
	width: 0.4em;
	height: 0.8em;
	border-right: 3px solid #000;
	border-bottom: 3px solid #000;
	content: '';
}

button[type="submit"]{
	margin: 3.0em auto 0 auto;
	display: block;
	padding: 0.8em 2.0em;
	background: #20316d;
	border-radius: 9999px;
	color: #fff;
	font-size: 1.8em;
	transition: 0.2s;
}
button[type="submit"]:hover,
button[type="submit"]:focus{
	background: #59afef!important;
}

select#mseiyy,
select#ent_seiyy,
select#grad_seiyy,
select#ent_hs_seiyy,
select#grad_hs_seiyy,
select#wh1_styy,
select#wh1_edyy,
select#wh2_styy,
select#wh2_edyy{
	margin: 0 8px 0 0;
	width: calc(4.5em + 24px);
	text-align: right;
}
select#mseimm,
select#mseidd,
select#ent_seimm,
select#grad_seimm,
select#ent_hs_seimm,
select#grad_hs_seimm,
select#wh1_stmm,
select#wh1_edmm,
select#wh2_stmm,
select#wh2_edmm{
	margin: 0 8px;
	width: calc(3.5em + 24px);
	text-align: right;
}

select#income,
select#wh1_gyousyu,
select#wh1_koyou,
select#wh1_income,
select#wh2_gyousyu,
select#wh2_koyou,
select#wh2_income{
	display: inline-block;
	width: calc(18.5em + 24px);
}

input#zip{
	margin-right: 8px;
	width: 6.0em;
	text-align: right;
}
input#tel{
	width: 9.0em;
}
button.btn-jusyo{
	padding: 0.2em 2.0em;
	background: #20316d!important;
	border-radius: 9999px;
	color: #fff;
	font-size: 0.9em;
	letter-spacing: 0.03em;
	transition: 0.2s;
}
button.btn-jusyo:hover,
button.btn-jusyo:focus{
	background: #59afef!important;
}

.anchor-title{
	padding: min(3.1746%,4.0em) min(7.1428%,9.0em); /* 40px / 1260px */
}
.anchor-title h2{
	font-size: 2.2em;
}



button[type="submit"]{
	position: relative;
	margin: 6.0em auto 0 auto;
	display: block;
	padding: 0.8em 2em;
	border: solid 2px #20316d;
	border-radius: 9999px;
	text-align: center;
	font-size: 1.8em;
	font-weight: bold;
	letter-spacing: 0.01em;
	transition: 0.2s;
}
button[type="submit"]:hover,
button[type="submit"]:focus{
	background: #59afef!important;
	border: solid 2px #59afef;
}

button[type="button"].btn-back{
	position: relative;
	margin: 6.0em auto 0 auto;
	display: block;
	padding: 0.8em 1.6em 0.8em 3.5em; /* 15px 30px / 18px */
	border: solid 2px #20316d;
	border-radius: 9999px;
	text-align: center;
	font-size: 1.8em;
	font-weight: bold;
	letter-spacing: 0.01em;
	transition: 0.2s;
}
button[type="button"].btn-back:hover,
button[type="button"].btn-back:focus{
	/*background: #fdf3f2!important;*/
	border: solid 2px #59afef;
	color: #000!important;
}
button[type="button"].btn-back::before{
	content: "";
	position: absolute;
	display: inline-block;
	top: calc(50% - 0.1em);
	left: 1.6em;
	transform: translateY(-50%);
	width: 1em;
	height: 3px;
	background: #20316d;
	transition: 0.2s;
}
button[type="button"].btn-back::after{
	content: "";
	top: calc(50% - 0.1em);
	left: 1.6em;
	position: absolute;
	display: inline-block;
	width: 0.65em;
	height: 0.65em;
	border-top: solid 3px #20316d;
	border-left: solid 3px #20316d;
	transform: translateY(-50%) rotate(-45deg);
	transition: 0.2s;
}

button[type="button"].btn-back:hover::before,
button[type="button"].btn-back:focus::before{
	background: #59afef;
	transform: translate(-4px,-50%);
}
button[type="button"].btn-back:hover::after,
button[type="button"].btn-back:focus::after{
	border-top: solid 3px #59afef;
	border-left: solid 3px #59afef;
	transform: translate(-4px,-50%) rotate(-45deg);
}

/*------------------------------------------
check
------------------------------------------*/
.form-check-area dl{
	display: flex;
	align-items: stretch;
	border: solid 1px #a1a1a1;
	width: 100%;
}
.form-check-area dl + dl{
	border-top: none;
}
.form-check-area dl dt{
	/*width: 18.5185%; /* 200px / 1080px */
	width: 11.1em; /* 200px / 18px */
	padding: 0.7407% 1.3888%; /* 8px 15px / 1080px */
	background: #eaefef;
	border-right: solid 1px #a1a1a1;
	font-size: 1.8em;
	font-weight: bold;
	letter-spacing: 0.03em;
}
.form-check-area dl dd{
	flex: 1;
	padding: 0.7407% 1.3888%; /* 8px 15px / 1080px */
	word-break: break-all;
	font-size: 1.8em;
	letter-spacing: 0.03em;
}

.btn-area{
	display: flex;
	justify-content: center;
	gap: 3.0em;
}
.btn-close{
	font-size: 1.8em;
}

/*------------------------------------------
send
------------------------------------------*/
.title{
	text-align: center;
	font-size: 3.0em;
	font-weight: bold;
	letter-spacing:0.1em;
}

/*------------------------------------------
PC
------------------------------------------*/
@media print, screen and (min-width: 768px){
	#header-area.form-header{
		position: static;
	}
	#title-area{
		margin-top: 0!important;
	}
}

/*------------------------------------------
sp
------------------------------------------*/
@media only screen and (max-width: 767px){

	.contents.form-contents{
		padding: 0 0 14.0625% 0;
	}

	/*------------------------------------------
	form
	------------------------------------------*/
	.error_coution{
		margin-bottom: 0;
		display: block;
		padding: 4.6875% 1.3em;
		font-size: 1.5em;
	}

	.form-area > div{
		margin-top: 4.6875%;
		width: 100%;
	}
	.form-area > div label,
	.form-area > div fieldset legend,
	.form-area > div .sp-label{
		display: block;
		width: 100%;
		padding: 1.5625% 1.3em; /* 5px 20px / 320px 15px */
		background: #eaefef;
	}
	.form-area > div fieldset legend{
		margin-bottom: 1.5625%; /* 5px / 320px */
	}

	.form-area fieldset label{
		display: inline-block;
		width: auto;
		background: none;
		font-weight: normal;
	}

	.form-area > div .sp-txt{
		margin: 4.6875% 0 0 0; /* 20px / 320px */
		padding: 0 1.3em;
		background: none;
	}
	.form-area > div{
		margin-top: 4.6875%;
		font-size: 1.5em;
	}

	.form-area > div input[type="text"],
	.form-area > div input[type="tel"],
	.form-area > div input[type="email"]{
		display: block;
		margin: 4.6875% 1.3em 0 1.3em; /* 15px 20px / 320px 15px */
		width: calc(100% - (1.3em * 2));
		padding: 0.2em;
		border: solid 1px #a1a1a1;
		border-radius: 3px;
	}
	input[type="text"]#reason_chk_other{
		margin-top: 0;
		margin-left: 3.0em;
		width: calc(100% - 4.5em);
	}	
	.form-area > div .sp-txt + input{
		margin-top: 0;
	}
	
	textarea{
		display: block;
		margin: 4.6875% 1.3em 0 1.3em; /* 15px 20px / 320px 15px */
		width: calc(100% - (1.3em * 2));
		height: 8em;
		padding: 0.2em;
		border: solid 1px #a1a1a1;
		border-radius: 3px;
	}

	.selectbox{
		position: relative;
	}
	.form-area > div select{
		display: block;
		margin: 4.6875% 1.3em 0 1.3em; /* 15px 20px / 320px 15px */
		width: calc(100% - (1.3em * 2));
		padding: 0.2em calc(0.2em + 24px) 0.2em 0.2em;
		border: solid 1px #a1a1a1;
		border-radius: 3px;
		cursor: pointer;
	}
	.selectbox::after{
		content: "";
		position: absolute;
		top: calc(50% - 6px);
		right: 2px;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-right: 6px solid transparent;
		border-left: 6px solid transparent;
		border-top: 10px solid #000;
		pointer-events: none;
	}
	.in-selectbox::after{
		right: 28px;
	}

	input[type="radio"]{
		position: relative;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		margin-left: 1.3em;
		width: 1.0em;
		height: 1.0em;
		border: 1px solid #000;
		border-radius: 50%;
		vertical-align: -3px;
	}
	input[type="radio"] + label{
		margin-right: 0;
		padding: 1.5625% 0;
	}

	input[type="checkbox"]{
		position: relative;
		margin-left: 1.3em;
		width: 1.0em;
		height: 1.0em;
		border: solid 1px #000;
		border-radius: 3px;
		vertical-align: -5px;
		vertical-align: -3px;
	}
	input[type="checkbox"] + label{
		margin-right: 0;
		padding: 1.5625% 0;
	}
/*	input[type="checkbox"]:checked:before{
		position: absolute;
		top: calc(50% - 0.3em);
		left: calc(50% + 0.2em);
		transform: translate(-50%, -50%) rotate(45deg);
		width: 0.4em;
		height: 0.8em;
		border-right: 3px solid #000;
		border-bottom: 3px solid #000;
		content: '';
	}*/

	span.format-txt{
		display: inline-block;
		margin-left: 1em;
		font-size: 0.8em;
		font-weight: normal;
	}

	.form-area > div span.red{
		display: block;
		margin: 0 1.3em 0 1.3em; /* 15px 20px / 320px 15px */
	}
	
	.sp-br br{
		display: none;
	}
	.sp-br input[type="radio"] + label::after,
	.sp-br input[type="checkbox"] + label::after{
		content:"\A";
		white-space:pre;
	}
	.sp-br fieldset label{
		display: inline;
	}

	select#mseiyy,
	select#ent_seiyy,
	select#grad_seiyy,
	select#ent_hs_seiyy,
	select#grad_hs_seiyy,
	select#wh1_styy,
	select#wh1_edyy,
	select#wh2_styy,
	select#wh2_edyy{
		display: inline-block;
		margin: 4.6875% 0 0 1.3em; /* 15px 20px / 320px 15px */
		width: calc(4.5em + 20px);
	}

	select#mseimm,
	select#mseidd,
	select#ent_seimm,
	select#grad_seimm,
	select#ent_hs_seimm,
	select#grad_hs_seimm,
	select#wh1_stmm,
	select#wh1_edmm,
	select#wh2_stmm,
	select#wh2_edmm{
		display: inline-block;
		margin: 4.6875% 0 0 1.3em; /* 15px 20px / 320px 15px */
		width: calc(3.5em + 20px);
	}

	select#income,
	select#wh1_gyousyu,
	select#wh1_koyou,
	select#wh1_income,
	select#wh2_gyousyu,
	select#wh2_koyou,
	select#wh2_income{
		display: block;
		margin: 4.6875% 1.3em 0 1.3em; /* 15px 20px / 320px 15px */
		width: calc(100% - 3.0em);
	}

	button[type="button"].btn-back{
		position: relative;
		margin: 4.0em auto 0 auto;
		display: block;
		padding: 0.8em 1.6em 0.8em 3.5em; /* 15px 30px / 18px */
		/*border: solid 2px #f9655d;*/
		border-radius: 9999px;
		text-align: center;
		font-size: 1.8em;
		font-weight: bold;
		letter-spacing: 0.01em;
		transition: 0.2s;
	}

	input#zip{
		display: inline-block;
		margin-right: 8px;
		width: 6.0em;
	}
	
	button.btn-jusyo{
		padding: 0.2em 0.8em;
	}	

	.anchor-title{
		padding: 3.125% 1.3em; /* 10px / 320px */
	}
	.anchor-title h2{
		font-size: 1.6em;
	}

	/*------------------------------------------
	check
	------------------------------------------*/
	.form-check-area dl{
		display: block;
		border: none;
		width: 100%;
	}
	.form-check-area dl dt{
		width: 100%;
		padding: 1.5625% 1.3em; /* 5px 20px / 320px 15px */
		background: #eaefef;
		border-right: none;
		font-size: 1.5em;
	}
	.form-check-area dl dd{
		width: 100%;
		padding: 4.6875% 1.3em; /* 15px 20px / 320px 15px */
		font-size: 1.5em;
	}

	.btn-area{
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 3.0em;
	}
	.btn-area button{
		width: 100%;
		max-width: 15em;
	}

	/*------------------------------------------
	send
	------------------------------------------*/
	.title{
		font-size: 2.2em;
	}
}