@charset "UTF-8";

/*----------------------------------------------------------------------------
*														パーツレイアウト変更
----------------------------------------------------------------------------*/

select,
input[type="text"],
input[type="number"],
textarea {
	margin: unset;
	font-size: 100%;
	padding: 0.2em 0.5em;
}

input[type="radio"],
input[type="checkbox"] {
	display: none;
}
a{
	cursor: pointer;
	text-decoration: none;
}
a:hover{
	text-decoration: none;
}
.radioParts {
	padding-left: 1.6em;
}
.radioParts {
	display: block;
	width: 100%;
	cursor: pointer;
	position: relative;
	margin-right: 1em;
	padding: 0.2em 0 0.3em 1.6em;
}
.radioParts::before {
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	border: 1px solid #999;
	border-radius: 50%;
	background-color: #FFF;
	position: absolute;
	top: 0.8em;
	left: 0;
	transform: translateY(-50%);
}
.radioInput:checked + .radioParts::after {
	content: "";
	display: block;
	width: 0.7em;
	height: 0.7em;
	background-color: #0f6cbb;
	border-radius: 50%;
	position: absolute;
	top: 0.45em;
	left: 0.25em;
}


.checkboxParts {
	padding: 0.2em 0 0.3em 2.1em;
	display: block;
	width: 100%;
	cursor: pointer;
	position: relative;
}
.checkboxParts::before {
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	border: 1px solid #999;
	border-radius: 25%;
	background-color: #FFF;
	position: absolute;
	top: 1em;
	left: 0.7em;
	transform: translateY(-50%);
}
.checkboxInput:checked + .checkboxParts::after{
	content:"";
	display:block;
	width:0.7em;
	height:0.7em;
	background-color:#0f6cbb;
	border-radius:25%;
	position:absolute;
	top:0.6em;
	left:0.92em;
}






sectionInnerBox .dispBlock{ display: block;}


.sectionInnerBox{ width: 55%; margin: 2em auto 0;}

.sectionInnerBox h4{ font-size: 100%;}

.sectionInnerBox dl{ display: flex; align-items: center;}
.sectionInnerBox dt{ width: 130px;}
.sectionInnerBox dd{ display: flex; width: calc(100% - 130px);}


.sectionInnerBox .clearFlex{ display: block;}
.sectionInnerBox .clearFlex input[type=text]{ margin-left: 10px; padding: 3px 5px; width: calc(100% - 23px);}
.sectionInnerBox .clearFlex p{ margin-left: 10px; font-size: 86%; color: #3b3b3b;}
.sectionInnerBox .clearFlex select{ margin-left: 10px; font-size: 100%; color: #3b3b3b;}


#errorBox{
	margin: 20px 10px;
	padding: 10px;
	border: double #f25e5e 3px;
}
#errorBox dd{ display: block; margin: auto; width: fit-content;}

.sectionInnerBox .clearFlex .btn{ display: block; margin: auto;}


.sectionInnerBox .dispNone{ display: none;}


@media screen and (max-width: 950px) {

	.sectionInnerBox{ width: 90% !important; margin: 3.5em auto 0;}

	.sectionInnerBox h4{ font-size: 105%;}

	.sectionInnerBox dt{ width: 100px;}
	.sectionInnerBox dd{ width: calc(100% - 100px); font-size: 120%;}

	.sectionInnerBox .clearFlex input{ width: calc(100% - 10px);}

	#errorBox{ margin: 20px 0px;}

	.sectionInnerBox .clearFlex .btn{ font-size: 100%;}

}

@media screen and (max-width: 550px) {

	.sectionInnerBox dl{ display: block;}
	.sectionInnerBox dl dt{ width: 100%; margin-bottom: 0.4em; font-size: 12px;}
	.sectionInnerBox dl dt br{ display: none;}
	.sectionInnerBox dl dd{ width: 100%;}

}

@media screen and (max-width: 350px) {

	.sectionInnerBox h4{ font-size: 92%;}
	.sectionInnerBox dt{ width: 110px;}


	.sectionInnerBox .clearFlex p{ font-size: 78%; color: #000;}
}