@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 {
    padding: calc(var(--gutter_base)*5);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.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 dl dd input[type="text"],
.trial .trial_inner .trial_form dl dd input[type="email"] {
    width: 100%;
    padding: var(--gutter_base);
    border: 1px solid #ccc;
}

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

.trial .trial_inner .trial_form dl dd input[type="radio"]+label {
    display: inline-block;
    border: 1px solid var(--main_color);
    padding: var(--gutter_base);
    margin-bottom: var(--gutter_base);
    margin-right: var(--gutter_base);
    width: 100px;
    text-align: center;
}

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

.trial .trial_inner .trial_form dl dd 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;
    display: block;
    width: 100%;
    height: 90px;
    position: relative;
    margin-top: calc(var(--gutter_base)*10);
    margin-left: auto;
    margin-right: auto;
    transition: 0.4s;

}

.trial .trial_inner .trial_form button.back {
    max-width: 120px;
    border: 1px solid #666;
    color: #666;
}

.trial .trial_inner .trial_form button.submit {
    margin-top: calc(var(--gutter_base)*2);

}

.trial .trial_inner .trial_form button::after {
    font-family: 'Material Symbols Outlined';
    content: '\e5c8';
    vertical-align: middle;
    position: absolute;
    right: 20px;
    transition: 0.4s;

}

.trial .trial_inner .trial_form button.back::after {
    content: '';
}

@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 button:hover::after {
        right: 15px;
        content: '\e5cc';
    }

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