@charset "utf-8";

/* --------------- form base --------------- */

form {margin: 0 auto;}

input, select, textarea, button {
	-webkit-appearance: none;
    appearance: none;
	display: inline-block;
	width: 100%;
	font-size: 1em;
	font-weight: inherit;
	letter-spacing: 0.067em;
    vertical-align: middle;
    padding: 0.684em 0.867em;
	outline: 0;
    border: none;
    border-radius: 0;
    background: #fff;}

input, select, button {line-height: 1.5;}
input, select, textarea {border: solid 1px #a0a0a0;}

input[type="checkbox"],
input[type="radio"] {display: none !important;}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"] {width: 100%;}

input[type="number"],
input[type="date"] {letter-spacing: 0;}

input[type="file"] {
	padding-left: 0;
	border: none;
	background: none;}

textarea {
	max-width: 610px;
	min-height: 8em;}

select {color: #333;}
option {}

@media (min-width:641px) {}
@media (max-width:640px) {}


/* --------- radio ＆ checkbox --------- */
input[type="radio"] + span,
input[type="checkbox"] + span {
	position: relative;
	display: inline-block;
	width: 1.334em; height: 1.334em;
	background-color: #fff;
	border: solid 0.115em #ece8fc;}

	[type="radio"] + span::before,
	[type="radio"] + span::after,
	[type="checkbox"] + span::before {
		position: absolute;
		content: '';
		display: block;}

input[type="radio"] + span {margin-right: 0.556em;}
input[type="radio"] + span,
[type="radio"] + span::before,
[type="radio"] + span::after {border-radius: 50%;}

		[type="radio"] + span::before {}
		[type="radio"] + span::after {
			opacity: 0;
			top: 50%; left: 50%;
			transform: translate(-50%,-50%);
			width: 0.923em;
			height: 0.923em;
			background: #e44379;
			transition: all 0.3s 0s ease-out;}
		[type="radio"]:checked + span::after {opacity: 1;}

input[type="checkbox"] + span {margin: 0.084em 0.556em 0 0;}

	[type="checkbox"] + span::before {
		top: -0.056em; left: 0;
			width: 1.2em;
			height: 0.75em;
		-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
				transition:         transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
		-webkit-transform: rotate(-45deg) scale(0, 0);
				transform: rotate(-45deg) scale(0, 0);
		border: 5px solid #e44379;
		border-top-style: none;
		border-right-style: none;}

/* --- checkbox 表示切替 --- */
[type="checkbox"]:checked + span::before {
	-webkit-transform: rotate(-45deg) scale(1, 1);
			transform: rotate(-45deg) scale(1, 1);}


input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance:textfield;
}

@media (min-width:641px){}
@media (max-width:640px) {}

/* ------------------------------------------------------------
	form iroiro
 ------------------------------------------------------------ */

form dl,
form label {
	display: flex; flex-wrap: wrap; justify-content: flex-start;
	align-items: flex-start;}

form dl {width: 100%;}
form dt,
form dd {font-size: 1.067em;}

form dd {}

form dd dt,
form dd dd {font-size: 1em;}


/* --- hissu → hsu ＆ nini  --- */
.hsu,
.nini {position: relative;}
.hsu::before,
.nini::before {
	position: absolute;
	top: 0.49997em; left: 0;
	display: block;}

.hsu::before{
	content: "【必須】";
	color: #e83b0c;}

.nini::before {
	content: "【任意】";
	color: #57c6eb;}


/* --- radio_wk ＆ check_wk --- */
.radio_wk,
.radio_wk label,
.check_wk,
.check_wk label {
	display: flex; flex-wrap: wrap; justify-content: flex-start;
	align-items: center;}
.radio_wk label,
.check_wk label {
	font-size: 1.2em;
	margin: 1.112em 4.6297% 0 0;}



/* --- error_wk --- */
.error_wk {
	color: #dd3a5b;
	font-size: 1.2em;
	max-width: 800px;
	margin:  0 auto;}
.error_wk p {text-align: center;}
.error_wk p + p {margin-top: 0.334em;}
.btn_wk + .error_wk {margin-top: 2.666em;}

/* --- search_wk --- */

@media (min-width:641px) {
	form dt {padding-left: 3.437em;}
}
@media (max-width:640px) {
	
	/* --- hsu ＆ nin --- */
	.hsu,
	.nini {padding-left: 3.437em;}
}

/* ------------------------------------------------------------
	各画面共通項目 iroiro
 ------------------------------------------------------------ */


.tel {}
.mail {}


.tel input,
.mail input {letter-spacing: 0;}


.pw-hyuj {
	width: auto;
	margin-left: 0.5em;
	font-size: 0.867em;
	letter-spacing: 0.231em;
	color: #fff;
	border-radius: 4px;
	background: #d67030;}