@charset "utf-8";

/*
************************************************************************
* ボタン類
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */

.button
{
    -webkit-appearance : none;
    -webkit-tap-highlight-color : rgba(0,0,0,0);

    border-radius:0.5em;

    display:inline-block;

    transition-duration:0.2s;
    transition-property:all;
    transition-timing-function:ease;

    background-color: #009FE8;


    font-weight: bold;

    margin: 1em auto;
    display: inline-block;

}
.button a {
    display: block;
    padding: 0.5em 3em;
    color: #fff;
    font-size: 1.2em;
}


.button.button-back {
}
.button.button-submit {
    float: right;
}


.button > span
{
    display:block;

    padding:0.2em 1em;

    line-height:1.2;

    transition-duration:0.2s;
    transition-property:all;
    transition-timing-function:ease;
}
.button:hover,
.button a:hover,
.button a:hover span
{
	text-decoration:none;
}

.button:hover > span
{
    text-decoration: none;
}
.button > span.text {
    padding: 0.8em 3em;
    font-size: 1.2em;
}

.button:hover > span.text {
    color: #fff;
}

.button.button-small
{
	font-size:0.8em;
}
.button.button-small > span
{
    padding:0.5em 1.0em;
}
.button.button-warning
{
}
.button.button-warning:hover
{
}


.button-promise {
    display: inline-block;
    text-align: center;
    color: #009FE8;
    font-size: 1.4em;
    font-weight: bold;
    line-height: 1.4;

    background: none;
    border: none;

    margin: 1em 3em;
    padding: 0 0.4em;
}
.button-promise.on,
.button-promise:hover {
    background: linear-gradient(to top, #FCCC00 40%, rgba(255, 255, 255, 0) 40% 100%);
}

.promise-block {
    display: none;
}
.promise-block.on {
    display: block;
}






/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1320px) {

}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
    button {
        background-color: transparent;
    }
    .select-button-item {
        width: calc(50% - 2em);
        margin: 0.5em 1em;
        text-align: center;
    }
    .select-button {
        border-radius: 3.125vw 0 3.125vw 0;

        padding: 2.34vw 0;
        font-size: 0.9em;
    }


    .button
    {
        padding: 0.5em 0;

    }
    .button-promise {
        font-size: 1.2em;
        margin: 1em;
    }


    .button.button-back {
        width: 40vw;
        float: left;
    }
    .button.button-submit {
        width: 40vw;
        float: right;
    }

}