@charset "utf-8";

/*-----------------------------------------------
  form
-----------------------------------------------*/
/* select */
select {
width: auto;
padding: 0.5em 1em;
background: #FFF;
border: 1px solid #CCC;
border-radius: 2em;
appearance: menulist; 
}

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

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

/* submit */
[type=submit] {
position: relative;
display: block;
width: 100%;
max-width: 16em;
margin: auto;
padding: 0.75em 1em;
font-size: 1.25em;
font-weight: 700;
text-align: center;
border: 2px solid #009249;
border-radius: 3em;
cursor: pointer;
transition: 0.2s;
}
[type=submit]::after {
content: "";
position: absolute;
top: calc(50% - 0.5em);
right: 0.75em;
width: 0.6em;
height: 1em;
background-image: url("../img/arw_button.svg");
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.button-1 {
color: #FFF;
background: #009249;
}
.button-1::after {
background-image: url("../img/arw_white.svg");
}
.button-1:hover {
color: #009249;
background: #FFF;
}
.button-1:hover::after {
background-image: url("../img/arw_color.svg");
}
.button-2 {
color: #009249;
background: #FFE528;
}
.button-2::after {
background-image: url("../img/arw_color.svg");
}
.button-2:hover {
color: #FFF;
background: #009249;
}
.button-2:hover::after {
background-image: url("../img/arw_white.svg");
}
.button-3 {
color: #009249;
background: #D9EFE4;
}
.button-3::after {
left: 0.75em;
right: auto;
background-image: url("../img/arw_color.svg");
transform: rotate(180deg);
}
.button-3:hover {
color: #FFF;
background: #009249;
}
.button-3:hover::after {
background-image: url("../img/arw_white.svg");
}

/* checkbox */
/* radio */
[type=checkbox],
[type=radio] {
position: absolute;
opacity: 0;
pointer-events: auto;
}
.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;
background: #FFF;
border: 1px solid #CCC;
transition: 0.3s;
}
.checkbox span:after,
.radio span:after {
content: "";
position: absolute;
display: none;
width: 1.25em;
height: 1.25em;
top: 0.2em;
left: 0;
background: #009249;
transform: scale(0.5);
transition: 0.2s;
}
.checkbox span:before,
.checkbox span:after,
.radio span:before,
.radio span:after {
border-radius: 100%;
}