/* RESET */
*{-webkit-tap-highlight-color:rgba(0, 0, 0, 0)}html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;box-sizing:border-box;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}a{margin:0;padding:0;font-size:100%;text-decoration:none;vertical-align:baseline;background:transparent}a:focus,*:focus{outline:none}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #cccccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/* BASE */
html {
    min-height: 100vh;
    font-size: 10px;
    font-family: 'BIZ UDPGothic', sans-serif;
    background: radial-gradient(circle at 5% 5%, #66a166, rgb(6, 30, 34) 80%);
}

main {
    width: 100%; max-width: 900px;
    margin: 50px auto;
}

h1 {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #f7f7f7;
}

.description {
    width: 100%;
    margin: 50px auto;
    font-size: 14px; font-weight: 400;
    color: #ddd;
    line-height: 2em;
    letter-spacing: 0.1em;
    text-align: center;
}


/* FORM */
.contactform dl {
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
}
.contactform dt {
    width: 20%;
    margin-top: 0.5em;
    color: #ddd;
    font-size: 1.8rem;
}
.contactform dt.nomargin {
    margin-top: 0;
}
.contactform dd {
    width: 70%;
}
.contactform input, .contactform select, .contactform textarea {
    width: 100%;
    padding: 10px 10px;
    font-size: 1.6rem;
    color: #333;
    font-family: 'BIZ UDPGothic', sans-serif;
    display: block;
    border: none;
    border-radius: 10px;
    background-color: #fff;
    box-sizing: border-box;
}
.contactform textarea {
    height: 10em;
    resize: none;
}
.contactform .note {
    margin: 10px 0 0;
    padding-left: 10px;
    font-size: 1.2rem;
    line-height: 1.2em;
    color: #ddd;
    font-weight: 400;
}
.contactform .suggest-area {
    width: 100%;
    padding: 5px 5px 10px;
    font-size: 1.2rem;
    color: #ddd;
    font-family: 'BIZ UDPGothic', sans-serif;
}
.contactform .suggest-area span {
    margin: 5px;
    padding: 5px 10px;
    display: inline-block;
    border: none;
    border-radius: 10px;
    background-color: #66a166;
    box-sizing: border-box;
    cursor: pointer;
}
.button {
    margin: 20px auto 40px;
    padding: 15px 15px 15px 20px;
    font-size: 1.6rem; font-weight: 400;
    color: #f7f7f7;
    letter-spacing: 0.5em;
    display: block;
    appearance: none;
    cursor: pointer;
    outline: none;
    border: solid 2px #f7f7f7;
    border-radius: 10px;
    background-color: #f1a957;
}
.button:hover {
    background-color: #f49d37;
}
.button:disabled, .button:disabled:hover {
    background-color: #d1d5d5;
    cursor: unset;
}
.g-recaptcha {
    width: 100%;
    margin: 20px auto;
    display: flex;
    justify-content: center;
}


@media (max-width:768px) {
    .contactform dl {
        flex-wrap: wrap;
    }
    .contactform dt, .contactform dd {
        width: 100%;
    }
}

/* SUCCESS */
.success {
    width: 100vw; height: 100vh;
    position: fixed;
    top: 0; left: 0; right: 0;
    display: none;
    background-color: rgba(0, 0, 0, 0.85);
}
.success.show {
    display: block;
}
.success--inner {
    width: 80%; max-width: 900px;
    margin: 0 auto;
    position: absolute;
    top: 50%; left: 0; right: 0;
    transform: translateY(-50%);
    color: #c0c0c0;
    text-align: center;
}

.success--inner h2 {
    font-size: 20px; font-weight: 700;
}
.success--inner p {
    margin: 50px auto;
    font-size: 16px;
    line-height: 2em;
}
.success--inner p.notice {
    font-size: 12px;
}
.success--button {
    margin: 20px auto 0;
    padding: 10px 7px;
    font-size: 1.2rem; font-weight: 400;
    color: #c0c0c0;
    display: block;
    appearance: none;
    cursor: pointer;
    outline: none;
    border: solid 2px #c0c0c0;
    border-radius: 10px;
    transition: background-color .3s;
    background-color: #333;
}
.success--button:hover {
    background-color: #000;
}