@charset "utf-8";

:root{
	--form-py:1rem;
	--bs-form-valid-color:black;
}

ul.form-btns{justify-content:space-between; gap:1rem; padding-top:3rem;}

.form-group{margin-bottom:2rem;}
.form-row{position:relative;}

.form-select,
.form-control{
	border-radius:15px;
	padding:var(--form-py) 1rem;
	border:none;
}

.form-check{
	display:inline-flex;
	align-items:center;
	gap:.5em;
}
.form-check-input[type="radio"]{
	width:1.625em;
	height:auto;
	aspect-ratio:1/1;
	background-color:#F5D9C6;
	margin:0;
	border:none;
}
.form-check-input[type="radio"]:checked{
	background-color:var(--color-main) !important;
}
.form-check-input[type=checkbox]{
	width:1.625em;
	height:auto;
	aspect-ratio:1/1;
	border-color:var(--color-black);
	border-radius:0;
	margin:0;
}
.form-check-input[type=checkbox]:checked{
	background-color:var(--color-main) !important;
}

[class*="form-label"]{
	display:flex;
	gap:.5em;
	line-height:1.4;
}

[class*="form-label"].required::after{
	content:'必須';
	display:inline-flex;
	align-items:center;
	padding:0 .5em;
	font-size:.875em;
	line-height:1;
	white-space:nowrap;
	border-radius:5px;
	color:white;
	background-color:var(--color-main);
}

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

/*
textarea.readonly{background-color:rgba(0,0,0,.05); border-color:rgba(0,0,0,.1);}
input[type="color"].form-control{display:inline-block; width:46px; padding:2px; border-radius:2px;}
*/

.form-check.d-flex{gap:.5rem; align-items:center; margin:.5rem 0;}
.form-check.d-flex label{width:100%;}

/*

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:'〒'};
*/

/* error
----------------------------------------------- */
.valid-tooltip,
.invalid-tooltip{font-size:.75rem; top:0; right:0; opacity:.9; transform:translateY(-100%);}

.invalid-tooltip-none .invalid-tooltip{display:none !important;}

.form-control.is-invalid, .was-validated .form-control:invalid,
.form-control.is-valid, .was-validated .form-control:valid,
.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"]{background-image:none;}

.form-control.is-invalid, .was-validated .form-control:invalid{border:1px solid var(--bs-danger) !important;}


/* .mode-conf
----------------------------------------------- */
.mode-conf .form-label::before{content:none !important;}

/* 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%);
}
*/