/* ------------------------------
エレメント
------------------------------ */
input,
select,
textarea{
width:100%;
min-height:4.8rem;
padding:0 1.4rem;
background:#FFF;
border:1px solid var(--color-line2);
border-radius:.3rem;
box-sizing:border-box;
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

textarea{
min-height:14rem;
padding:1.4rem;
line-height:1.7;
resize:vertical;
}

@media(max-width:800px){

input,
textarea,
select{
font-size:16px;
}

}


/* ------------------------------
select
------------------------------ */
select{
padding-left:2.4rem;
border-radius:999px;
}


/* ------------------------------
placeholder
------------------------------ */
input::placeholder,
textarea::placeholder{
color:var(--color-gray4);
}

/* ------------------------------
focus
------------------------------ */
input:focus,
select:focus,
textarea:focus,
button:focus{
outline:none;
transition:border-color .2s, box-shadow .2s;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible{
outline:none;
}

input:focus,
select:focus,
textarea:focus{
border-color:var(--color-gray3);
box-shadow:0 0 .5rem .5rem rgba(149,157,166, .12);
}

/* ------------------------------
checkbox / radio 共通
------------------------------ */
.form-check,
.form-radio{
display:flex;
align-items:top;
gap:1rem;
width:100%;
cursor:pointer;
user-select:none;
transition:.2s;
box-sizing:border-box;
}

/* input本体は残して透明化 */
.form-check input,
.form-radio input{
position:absolute;
opacity:0;
width:1px;
height:1px;
margin:-1px;
padding:0;
overflow:hidden;
clip:rect(0,0,0,0);
}

/* checkbox */
.form-check__mark{
width:2rem;
height:2rem;
border:1px solid var(--color-gray1);
border-radius:.4rem;
background:#fff;
position:relative;
flex:0 0 auto;
}

/* checkbox checked */
.form-check input:checked + .form-check__mark{
background:var(--color-gray1);
border-color:var(--color-gray1);
}

.form-check input:checked + .form-check__mark::after{
content:"";
position:absolute;
left:50%;
top:45%;
width:.5rem;
height:1rem;
border-right:2px solid #fff;
border-bottom:2px solid #fff;
transform:translate(-50%, -50%) rotate(45deg);
}

/* radio */
.form-radio__mark{
width:2rem;
height:2rem;
border:1px solid var(--color-gray1);
border-radius:50%;
background:#fff;
position:relative;
flex:0 0 auto;
}

/* radio checked */
.form-radio input:checked + .form-radio__mark{
border-color:var(--color-gray1);
}

.form-radio input:checked + .form-radio__mark::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:.9rem;
height:.9rem;
background:var(--color-gray1);
border-radius:50%;
transform:translate(-50%, -50%);
}

/* hover */
.form-check:hover .form-check__mark,
.form-radio:hover .form-radio__mark{
border-color:var(--color-gray1);
}

/* focus */
.form-check input:focus-visible + .form-check__mark,
.form-radio input:focus-visible + .form-radio__mark{
outline:3px solid rgba(37,99,235,.25);
outline-offset:3px;
}

/* disabled */
.form-check input:disabled + .form-check__mark,
.form-radio input:disabled + .form-radio__mark{
background:var(--color-gray7);
border-color:var(--color-gray6);
}

.form-check input:disabled ~ .form-check__text,
.form-radio input:disabled ~ .form-radio__text{
color:#9ca3af;
}

.form-check:has(input:disabled),
.form-radio:has(input:disabled){
cursor:not-allowed;
}