@charset "utf-8";

:root{
	--form-py:1rem;
	---color-required:#4083C4;
}

form>.row{margin-left:-15px !important; margin-right:-15px !important;}
form>.row>*{padding-left:15px !important; padding-right:15px !important;}

.form-row{position:relative;}

.form-control-plaintext,
.form-select,
.form-control{
	border-radius:10px;
	padding:var(--form-py) .75rem;
	background-color:#E4E9EA;
	border:none;
}
.form-control-plaintext{
	display:inline-block;
	min-height:calc(1em + var(--form-py) * 2);
}

[class*="form-label"]{
	display:flex;
	padding-top:var(--form-py);
	padding-bottom:var(--form-py);
}
@media (min-width:992px){
	[class*="form-label"]{
		max-width:17em;
		align-items:flex-start;
		justify-content:space-between;
	}
}
@media (max-width:992px){
	[class*="form-label"]{
		align-items:center;
		justify-content:flex-start;
		gap:1rem;
	}
}

[class*="form-label"].required::after{
	content:'必須';
	display:inline-block;
	padding:0.35em 0.65em;
	font-size:0.75em;
	line-height:1;
	text-align:center;
	white-space:nowrap;
	vertical-align:baseline;
	border-radius:3px;
	color:white;
	font-weight:600;
	background-color:var(---color-required);
	position:relative;
	top:.2em;
}

textarea.form-control{
	field-sizing:content;
	width:100%;
	min-height:15rem;
}
/*
textarea.form-control.one-line{
	resize:none;
	min-height:min-content;
}
*/

.form-btns{display:flex; justify-content:center; gap:2rem;}
@media (max-width:575px){
	.form-btns{flex-direction:column; align-items:center;}
	.form-btns .btn{justify-content:space-between;}
	.btn-back{
		order:1;
		padding:.75em 2em !important;
		max-width:8em;
		gap:1em !important;
	}
}

/*
select,
select.form-control{display:inline-block; width:auto;}

[type="submit"].btn.disabled{
	pointer-events:auto;
}

.col-zip input{display:inline-block; width:auto;}
.col-zip::before{content:'〒'};
*/

/* done
----------------------------------------------- */
/* .form-select, */
.form-control.is-valid,
.was-validated .form-control:valid{background-image:none;}

.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: none !important;
}

/* error
----------------------------------------------- */
.valid-tooltip,
.invalid-tooltip{font-size:.75rem; top:0; right:0; opacity:.9;}
.invalid-tooltip{margin-top:-.9em; border-radius:3px; font-size:.75rem; line-height:1;}

/* .mode-conf
----------------------------------------------- */
.mode-conf [class*="form-label"]::after{content:none !important;}
.mode-conf .conf-none{display:none;}

/* comp
----------------------------------------------- */
.btn-comp>span{display:inline-block; position:relative;}
.btn-comp .spinner-border{position:absolute; top:0; left:-2.5em; display:none;}

/* .form-comp-box{display:none;} */

#form-comp .modal-content{
	color: #0f5132;
	background-color: #d1e7dd;
	border-color: #badbcc;
}
#form-comp .btn-close{
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f5132'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
}

#form-comp.error .modal-content{
	color: #842029;
	background-color: #f8d7da;
	border-color: #f5c2c7;
}
#form-comp.error .btn-close{
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23842029'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e");
}

/* error tooltip version
----------------------------------------------- */
/*
.help-block{position:relative;}
.help-block ul li{font-size:.8rem; padding:.2rem .75rem; color:#842029; background-color:#f8d7da; border-radius:4px; position:absolute; top:0; right:1rem; transform:translateY(-85%);}
.help-block ul li::after{
	content:'';
	display:block;
	width:0;
	height:0;
	border:10px solid red;
	border-color:#f8d7da transparent transparent transparent;
	position:absolute;
	bottom:0;
	left:50%;
	transform:translate(-50%, 100%);
}
*/