@charset "utf-8";

/*****************************************************************/


a.btn-basic-o-active {
    font-weight: bold;
    font-size: 120%;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    border-radius: 0.4rem;
    color: #fff !important;
    background: url(/cmn/img/bg-grade-w.png) left top repeat-x #f38c21;
    -webkit-box-shadow: 0 5px 0 #ef7a00;
    box-shadow: 0 5px 0 #ef7a00;
    margin: 0.5em auto 1em auto;
    width: auto;
	min-width: 220px;
    padding: 0.5em 0.25em;
}
a.btn-basic-o {
    font-weight: bold;
    font-size: 120%;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    border-radius: 0.4rem;
    color: #afabab !important;
    background: url(/cmn/img/bg-grade-w.png) left top repeat-x #fbe5d6;
    -webkit-box-shadow: 0 5px 0 #f9d0b4;
    box-shadow: 0 5px 0 #f9d0b4;
    margin: 0.5em auto 1em auto;
    width: auto;
	min-width: 220px;
    padding: 0.5em 0.25em;
}
a.btn-basic-o-active:hover, a.btn-basic-o:hover {
    -webkit-transform: translate(0, 3px);
    transform: translate(0, 3px);
    color: #fff !important;
    background: #ef7a00;
    -webkit-box-shadow: 0 2px 0 #ef7a00;
    box-shadow: 0 2px 0 #ef7a00;
}

a.btn-basic-b-active {
    font-weight: bold;
    font-size: 120%;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    border-radius: 0.4rem;
    color: #fff !important;
    background: url(/cmn/img/bg-grade-w.png) left top repeat-x #308dd8;
    -webkit-box-shadow: 0 5px 0 #0572c9;
    box-shadow: 0 5px 0 #0572c9;
    margin: 0.5em auto 1em auto;
    width: auto;
	min-width: 220px;
    padding: 0.5em 0.25em;
}
a.btn-basic-b {
    font-weight: bold;
    font-size: 120%;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    border-radius: 0.4rem;
    color: #afabab !important;
    background: url(/cmn/img/bg-grade-w.png) left top repeat-x #dcebf7;
    -webkit-box-shadow: 0 5px 0 #b9d7f0;
    box-shadow: 0 5px 0 #b9d7f0;
    margin: 0.5em auto 1em auto;
    width: auto;
	min-width: 220px;
    padding: 0.5em 0.25em;
}

a.btn-basic-b-active:hover, a.btn-basic-b:hover {
    -webkit-transform: translate(0, 3px);
    transform: translate(0, 3px);
    color: #fff !important;
    background: #0572c9;
    -webkit-box-shadow: 0 2px 0 #0572c9;
    box-shadow: 0 2px 0 #0572c9;
}

a.btn-basic-p-active {
    font-weight: bold;
    font-size: 120%;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    border-radius: 0.4rem;
    color: #fff !important;
    background: url(/cmn/img/bg-grade-w.png) left top repeat-x #f25c5c;
    -webkit-box-shadow: 0 5px 0 #e03b3b;
    box-shadow: 0 5px 0 #e03b3b;
    margin: 0.5em auto 1em auto;
    width: auto;
	min-width: 220px;
    padding: 0.5em 0.25em;
}
a.btn-basic-p {
    font-weight: bold;
    font-size: 120%;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    border-radius: 0.4rem;
    color: #afabab !important;
    background: url(/cmn/img/bg-grade-w.png) left top repeat-x #fae0e0;
    -webkit-box-shadow: 0 5px 0 #f5c1c1;
    box-shadow: 0 5px 0 #f5c1c1;
    margin: 0.5em auto 1em auto;
    width: auto;
	min-width: 220px;
    padding: 0.5em 0.25em;
}

a.btn-basic-p-active:hover, a.btn-basic-p:hover {
    -webkit-transform: translate(0, 3px);
    transform: translate(0, 3px);
    color: #fff !important;
    background: #e03b3b;
    -webkit-box-shadow: 0 2px 0 #e03b3b;
    box-shadow: 0 2px 0 #e03b3b;
}


@media only screen and (max-width: 750px) { /*sp*/
	
a.btn-basic-o-active, a.btn-basic-b-active, a.btn-basic-p-active {
    font-size: 110%;
    min-width: 280px;
    width: calc(100% - 4.5em);
    padding: 0.25em 0.5em;
    margin: 0.5em auto 0.25em auto;
	}
a.btn-basic-o {
    font-size: 110%;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    border-radius: 0.3rem;
    color: #afabab !important;
    background: url(/cmn/img/bg-grade-w.png) left top repeat-x #fbe5d6;
    -webkit-box-shadow: 0 5px 0 #f9d0b4;
    box-shadow: 0 5px 0 #f9d0b4;
    margin: 0.5em auto 0.25em auto;
    min-width: 280px;
    width: calc(100% - 4.5em);
    padding: 0.25em 0.5em;
	}

a.btn-basic-b {
    font-size: 110%;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    border-radius: 0.3rem;
    color: #afabab !important;
    background: url(/cmn/img/bg-grade-w.png) left top repeat-x #dcebf7;
    -webkit-box-shadow: 0 5px 0 #b9d7f0;
    box-shadow: 0 5px 0 #b9d7f0;
    margin: 0.5em auto 0.25em auto;
    min-width: 280px;
    width: calc(100% - 4.5em);
    padding: 0.25em 0.5em;
	}

	a.btn-basic-p {
    font-size: 110%;
    line-height: 1.5;
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.1em;
    border-radius: 0.3rem;
    color: #afabab !important;
    background: url(/cmn/img/bg-grade-w.png) left top repeat-x #fae0e0;
    -webkit-box-shadow: 0 5px 0 #f5c1c1;
    box-shadow: 0 5px 0 #f5c1c1;
    margin: 0.5em auto 0.25em auto;
    min-width: 280px;
    width: calc(100% - 4.5em);
    padding: 0.25em 0.5em;
	}


}