@charset "utf-8";




/*-----------------------------------------------
  form
-----------------------------------------------*/
/* select */
select {
width: 100%;
padding: 0.5em;
background: #FFF;
border: 1px solid #999;
border-radius: 0.2em;
}

/* textarea */
textarea {
width: 100%;
height: 15em;
padding: 0.5em;
background: #FFF;
border: 1px solid #999;
border-radius: 0.2em;
}

/* text */
[type=text] {
width: 100%;
padding: 0.5em;
background: #FFF;
border: 1px solid #999;
border-radius: 0.2em;
}

/* submit */
[type=submit] {
display: block;
width: 100%;
max-width: 16em;
margin: 0 auto;
margin-top: 4%;
padding: 1.25em;
text-align: center;
color: #FFF;
background: #000;
border: 1px solid #000;
border-radius: 0.2em;
cursor: pointer;
transition: 0.2s;
}
[type=submit].modify {
background: #555;
}
[type=submit]:hover {
color: #000;
background: none;
}

/* checkbox */
/* radio */
[type=checkbox],
[type=radio] {
display: none;
}
.checkbox li,
.radio li {
margin: 0.1em 0;
}
.checkbox input:checked + span:after,
.radio input:checked + span:after {
display: block;
}
.checkbox span,
.radio span {
position: relative;
display: inline-block;
padding-left: 1.75em;
cursor: pointer;
}
.checkbox span:before,
.radio span:before {
content: "";
display: inline-block;
position: absolute;
left: 0;
top: 0.2em;;
width: 1.25em;
height: 1.25em;
border: 1px solid #999;
background: #FFF;
transition: 0.3s;
}
.checkbox span:after {
content: "";
position: absolute;
display: none;
width: 1.2em;
height: 0.6em;
left: 0;
top: 45%;
margin-top: -0.25em;
border-bottom: 2px solid #000;
border-left: 2px solid #000;
transform: scale(0.65) rotate(-45deg);
transition: 0.2s;
}
.radio span:after {
content: "";
position: absolute;
display: none;
width: 1.25em;
height: 1.25em;
top: 0.2em;
left: 0;
background: #000;
transform: scale(0.5);
transition: 0.2s;
}
.radio span:before,
.radio span:after {
border-radius: 100%;
}