@charset "utf-8";

.snow-monkey-form{
max-width:80rem;
margin:5rem auto 0;
}
.smf-text-control input{
max-width:30rem;
width:100%;
padding:.5em;
background:#fff;
}
.form_date .smf-item__controls{
display:flex;
gap:2rem;
}
.smf-select-control__control{
padding:.5em;
background:#fff;
}
.smf-textarea-control textarea{
width:100%;
background:#fff;
}
.smf-item:has([data-validations*="required"]) .smf-item__label::after{
content:"必須";
font-size:1.2rem;
background:var(--maincolor);
color:#fff;
display:inline-block;
padding:0 .3rem;
margin-left:.5rem;
}
.smf-item__description{
font-size:1.2rem;
margin-top:1rem;
color:var(--graycolor);
}
.form_header{
width: 90%;
margin-left: auto;
margin-right: auto;
}
.smf-action .smf-button-control__control{
background-color: transparent;
background-image: none;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}
.sec_inner .smf-action .smf-button-control__control{
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 500;
width: 41rem;
border-radius: 8.7rem;
text-align: center;
color: #fff;
height: 7rem;
display: grid;
place-content: center;
margin: auto;
position: relative;
font-size: 2rem;
transition: all .3s ease;
overflow: hidden;
}
.sec_inner .smf-action .smf-button-control__control[data-action="back"]{
background: var(--graycolor);
}
.sec_inner .smf-action .smf-button-control__control::before{
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, rgb(from var(--maincolor) r g b / 0.8) 0%, #ffc100cc 50%, rgb(from var(--accentcolor) r g b / 0.8) 100%);
transition: all .8s ease;
transform-origin: center;
transform: translateY(-50%);
top: 50%;
aspect-ratio: 1 / 1;
}
.sec_inner .smf-action .smf-button-control__control[data-action="back"]::before{
content: none;
}
.sec_inner .smf-action .smf-button-control__control:hover::before{
transform: translateY(-50%) rotate(180deg);
}
.sec_inner .smf-action .smf-button-control__control .smf-sending{
right: 2rem;
}
.sec_inner .smf-sending:before {
animation: smf-sending 2s ease-out 0s infinite;
border: 2px solid #fff;
border-top-color: #0000;
height: 2rem;
width: 2rem;
}
.snow-monkey-form--complete,
.smf-system-error-content{
padding: 0 2rem;
text-align: center;
}
@media (max-width: 768px) {
.sec_inner .smf-action .smf-button-control__control{
width: 90%;
font-size: 1.6rem;
height: 5rem;
}
}