@charset "UTF-8";

:root{

    --color--green1:#00b900;

}

.buttonarea{
    padding:10px 3rem;
}



a.button{
    display: flex;
    gap:10px;
    align-items: center;
    justify-content: center;
    color: #fff;
    background:  var(--color--green1);
    border-radius: min(2.3vw, 18px);
    height:auto;
    min-height: min(110px, 14vw);
    text-decoration: none;
    font-size: clamp(1.2rem,5vw,40px);
    font-feature-settings: "palt";
    line-height: 1.1;
    padding: .5rem;
    margin-bottom:.6rem;
    box-shadow: 0 min(1.5vw, 10px) 0 #006600;
    transition: .3s;
}
.button:hover{
    filter: saturate(1.1) brightness(1.1);
}


.color-var1{filter: hue-rotate(57deg);}
.color-var1:hover{filter: hue-rotate(57deg) saturate(1.1) brightness(1.1);}

.has-small-font-size a.button{
    font-size: clamp(.8rem, 3.5vw, 32px);
}

.button--text{}
.button--text.button--line{font-size: clamp(1.2rem,6vw,40px);}
.button--arrow{width: 4vw; display: flex;align-items: center;}
.button--arrow img{vertical-align: top;}
.button--linelogo img{width: min(10vw, 100px);}

.button--arrow{
    display: block;
    content: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%23ffffff"><path d="m380-300 280-180-280-180v360ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>');
    width: min(4vw, 32px);
}


.bounce {
	-webkit-animation: bounce 3s infinite;
	        animation: bounce 3s infinite;
}

@-webkit-keyframes bounce {
	0%, 6.6%, 17.49%, 33% {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
                animation-timing-function: cubic-bezier(.215,.61,.355,1);
        -webkit-transform: translateZ(0);
                transform: translateZ(0)
    }

    13.2%, 14.19% {
        -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
                animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        -webkit-transform: translate3d(0,-20px,0) scaleY(1.1);
                transform: translate3d(0,-20px,0) scaleY(1.1)
    }

    23.1% {
        -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
                animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        -webkit-transform: translate3d(0,-10px,0) scaleY(1.05);
                transform: translate3d(0,-10px,0) scaleY(1.05)
    }

    26.1% {
		-webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
		        transition-timing-function: cubic-bezier(.215,.61,.355,1);
        -webkit-transform: translateZ(0) scaleY(.95);
                transform: translateZ(0) scaleY(.95)
    }

    29.7% {
        -webkit-transform: translate3d(0,-4px,0) scaleY(1.02);
                transform: translate3d(0,-4px,0) scaleY(1.02)
    }
}

@keyframes bounce {
	0%, 6.6%, 17.49%, 33% {
        -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
                animation-timing-function: cubic-bezier(.215,.61,.355,1);
        -webkit-transform: translateZ(0);
                transform: translateZ(0)
    }

    13.2%, 14.19% {
        -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
                animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        -webkit-transform: translate3d(0,-20px,0) scaleY(1.1);
                transform: translate3d(0,-20px,0) scaleY(1.1)
    }

    23.1% {
        -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
                animation-timing-function: cubic-bezier(.755,.05,.855,.06);
        -webkit-transform: translate3d(0,-10px,0) scaleY(1.05);
                transform: translate3d(0,-10px,0) scaleY(1.05)
    }

    26.1% {
		-webkit-transition-timing-function: cubic-bezier(.215,.61,.355,1);
		     -o-transition-timing-function: cubic-bezier(.215,.61,.355,1);
		        transition-timing-function: cubic-bezier(.215,.61,.355,1);
        -webkit-transform: translateZ(0) scaleY(.95);
                transform: translateZ(0) scaleY(.95)
    }

    29.7% {
        -webkit-transform: translate3d(0,-4px,0) scaleY(1.02);
                transform: translate3d(0,-4px,0) scaleY(1.02)
    }
}