@charset "UTF-8";

/*
SP ～519px
tab 520px～959px
pc 960px～
*/
.trial {
    margin-bottom: var(--footer-gutter);
}

.trial .trial_inner {
    padding: 0 var(--contents-side-gutter);
}

.trial .trial_inner .trial_form {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
    padding: calc(var(--gutter-base)*5);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.trial .trial_inner .trial_form dl {
    margin-bottom: calc(var(--gutter-base)*3);
}

.trial .trial_inner .trial_form dl dt {
    margin-bottom: var(--gutter-base);
}

.trial .trial_inner .trial_form input[type="text"],
.trial .trial_inner .trial_form input[type="email"],
.trial .trial_inner .trial_form textarea {
    width: 100%;
    padding: var(--gutter-base);
    border: 1px solid #ccc
}

.trial .trial_inner .trial_form textarea {
    height: 300px;
}

.trial .trial_inner .trial_form select {
    padding: var(--gutter-base);
}

.trial .trial_inner .trial_form button {
    border: 1px solid var(--main-color);
    background-color: transparent;
    color: var(--main-color);
    max-width: 350px;
    width: 100%;
    height: 90px;
    display: block;
    margin-top: calc(var(--gutter-base)*10);
    margin-left: auto;
    margin-right: auto;
    transition: 0.4s;
}

.trial .trial_inner .trial_form input[type="radio"]+label {
    display: inline-block;
    border: 1px solid var(--main-color);
    padding: var(--gutter-base);
    margin-bottom: var(--gutter-base);
    color: var(--main-color);
}

.trial .trial_inner .trial_form input[type="radio"]:checked+label {
    color: #fff;
    background-color: var(--main-color);
}

.trial .trial_inner .trial_form input[type="radio"] {
    display: none;
}

.trial .trial_inner .trial_form .back {
    max-width: 100px;
    border-color: #666;
    color: #666;
    margin-top: calc(var(--gutter-base)*5);
}

.alert {
    color: #f33;
}

@media screen and (min-width:960px) {
    .trial .trial_inner .trial_form button:hover {
        background-color: var(--main-color);
        color: #fff;
    }

    .trial .trial_inner .trial_form .back:hover {
        background-color: #666;
    }
}

/*=======min-width:960px=======*/