@charset "utf-8";
/* CSS Document */

a {	text-decoration: none;}
a, a:visited {color:#323232; }
a:hover {color:#ffd700;text-decoration: underline;}


/* btn-blue */
.btn-blue a {
    background: #3787bc;
    border-radius: 50px;
	border-bottom:10px solid #2a668e;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
	max-width: 40rem;
    padding: 2.25rem 5rem;
    color: #fff;
    transition: 0.3s ease-in-out;
	font-size: 1.6rem;
    font-weight: 700;
}
.btn-blue a:hover {
    background: #313131;
    color: #FFF;
}
.btn-blue a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #313131;
    border-right: 3px solid #313131;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.btn-blue a:hover:after {
    border-color: #FFF;
}


/* btn-green */
.btn-green a {
    background: #00ff7f;
    border-radius: 50px;
	border-bottom:10px solid #00b55a;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
	max-width: 40rem;
    padding: 2.25rem 5rem;
    color: #323232;
    transition: 0.3s ease-in-out;
	font-size: 1.6rem;
    font-weight: 700;
}
.btn-green a:hover {
    background: #313131;
    color: #FFF;
}
.btn-green a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #313131;
    border-right: 3px solid #313131;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.btn-green a:hover:after {
    border-color: #FFF;
}


/* btn-green-hd */
.btn-green-hd a {
    background: #00ff7f;
    border-radius: 50px;
	border-bottom:10px solid #00b55a;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
	/*max-width: 40rem;*/
    padding: 1rem 2.5rem; /* padding: 2.25rem 5rem; */
    color: #323232;
    transition: 0.3s ease-in-out;
	font-size: 1.6rem;
    font-weight: 700;
}
.btn-green-hd a:hover {
    background: #313131;
    color: #FFF;
}
.btn-green-hd a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #313131;
    border-right: 3px solid #313131;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.btn-green-hd a:hover:after {
    border-color: #FFF;
}

.btn-green-hd a.forsp {
    display: none;
}


/* @media TABLET + SP
==================================================================================================== */
@media screen and ( max-width:959px ) {

.btn-green-hd a.forpc {
    display: none;
}
.btn-green-hd a.forsp {
    display:inline-block;
}

}

/* @meida SP
==================================================================================================== */
@media screen and ( max-width:559px ){

	.btn-blue a, .btn-green a {
		padding: 4.5rem 7rem;
		font-size: 2.72rem;
		max-width: 100rem !important;
	}
	
	.btn-green-hd a {
		padding: 1.5rem 5.5rem;
		font-size: 2.5rem;
	}

}