:root {
  --backgroundColor: rgba(253, 222, 220);
  --colorShadeA: rgb(204, 149, 148);
  --colorShadeB: rgb(250, 164, 159);
  --colorShadeC: rgb(253, 198, 194);
  --colorShadeD: rgb(248, 246, 233);
  --colorShadeE: rgb(248, 213, 211);
}


button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  font-size: 1.5rem;
  color: var(--colorShadeA);
  font-weight: 300;
  text-transform: uppercase;
  font-family: inherit;
}

button.big-button {
  padding: 0.5em 2em;
  border: 2px solid var(--colorShadeA);
  border-radius: 1em;
  background: var(--colorShadeE);
  transform-style: preserve-3d;
  transition: all 175ms cubic-bezier(0, 0, 1, 1);
}
button.big-button::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--colorShadeC);
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.75em 0 0 var(--colorShadeA);
  transform: translate3d(0, 0.75em, -1em);
  transition: all 175ms cubic-bezier(0, 0, 1, 1);
}

button.big-button:hover {
  background: var(--colorShadeD);
  transform: translate(0, 0.375em);
}

button.big-button:hover::before {
  transform: translate3d(0, 0.75em, -1em);
}

button.big-button:active {
  transform: translate(0em, 0.75em);
}

button.big-button:active::before {
  transform: translate3d(0, 0, -1em);

  box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.25em 0 0 var(--colorShadeB);
}

.bt_free{margin: 80px auto 60px auto;font-family: "蒙纳漫画体";text-align: center;font-size: 30px;}
.bt_free a{color: #8d2107;}
.bt_free a:hover{color:#af2f10;}


@media screen and (max-width:480px){
    button.big-button {
        padding: 0.2em 2em;
        border: 2px solid var(--colorShadeA);
        border-radius: 1em;
        background: var(--colorShadeE);
        transform-style: preserve-3d;
        transition: all 175ms cubic-bezier(0, 0, 1, 1);
    } 
    .bt_free {
        margin: 30px auto 50px auto;
        font-family: "蒙纳漫画体";
        text-align: center;
        font-size: 24px;
    } 
}


@media screen and (max-width:480px){
    button.big-button {
        padding: 0.2em 2em;
        border: 2px solid var(--colorShadeA);
        border-radius: 1em;
        background: var(--colorShadeE);
        transform-style: preserve-3d;
        transition: all 175ms cubic-bezier(0, 0, 1, 1);
    } 
    .bt_free {
        margin: 20px auto 50px auto;
        font-family: "蒙纳漫画体";
        text-align: center;
        font-size: 20px;
    } 
}