@charset "UTF-8";

* {
	box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

body {
    font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    color: #000;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center ;
}

a {
	text-decoration: none;
}

.button {
    position: absolute;
    top: 40%;
    font-family: 'Shadows Into Light', cursive;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  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;
  color: #000;
  border-radius: 0.5rem;
}

.btn-engine-start {
  position: relative;

  width: 145px;
  height: 145px;
  margin: 0 auto;

  border-radius: 50%;
  background: #000;
  background: -webkit-linear-gradient(
    315deg,
    #000 0%,
    #000 22%,
    #000 44%,
    #000 52%,
    black 100%
  );
  background: linear-gradient(
    135deg,
    #000 0%,
    #000 22%,
    #000 44%,
    #000 52%,
    black 100%
  );
  -webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.btn-engine-start:before {
  position: absolute;
  top: 7.5px;
  left: 7.5px;

  display: block;

  width: 130px;
  height: 130px;

  content: "";

  border-radius: 50%;
  background: #000;
  background: -webkit-linear-gradient(
    -45deg,
    #000 0%,
    #000 19%,
    #000 50%,
    #000 77%,
    #000 100%
  );
  background: -webkit-linear-gradient(
    315deg,
    #000 0%,
    #000 19%,
    #000 50%,
    #000 77%,
    #000 100%
  );
  background: linear-gradient(
    135deg,
    #000 0%,
    #000 19%,
    #000 50%,
    #000 77%,
    #000 100%
  );

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#515151', endColorstr='#ffffff', GradientType=1);
}

.btn-engine-start:hover a.btn-engine-start-in:before {
  top: 20px;

  background: #ff0048;
  -webkit-box-shadow: 0 0 6px rgba(97, 196, 25, 0.3);
  box-shadow: 0 0 6px rgba(97, 196, 25, 0.3);
}

.btn-engine-start:hover a.btn-engine-start-in {
  padding: 37px 0 0;

  color: #ec59fd;
  -webkit-box-shadow: inset 0 1px 1px black, 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 1px black, 0 1px 2px rgba(0, 0, 0, 0.5);
  text-shadow: 0 0 6px rgba(97, 196, 25, 0.3), 0 0 6px rgba(97, 196, 25, 0.3);
}

a.btn-engine-start-in {
  font-size: 14px;
  line-height: 1.2;

  position: absolute;
  top: 18px;
  left: 18px;

  width: 109px;
  height: 109px;
  padding: 35px 0 0;

  color: #000;
  border-radius: 50%;
  background: #000;
  background: -webkit-linear-gradient(
    -45deg,
    #000 0%,
    #000 46%,
    #000 50%,
    #000 69%,
    #000 100%
  );
  background: -webkit-linear-gradient(
    315deg,
    #000 0%,
    #000 46%,
    #000 50%,
    #000 69%,
    #000 100%
  );
  background: linear-gradient(
    135deg,
    #000 0%,
    #000 46%,
    #000 50%,
    #000 69%,
    #000 100%
  );
  -webkit-box-shadow: inset 0 2px 2px white, 0 2px 4px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 2px 2px black, 0 2px 4px rgba(0, 0, 0, 0.5);

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#959595', endColorstr='#1b1b1b', GradientType=1);
}

a.btn-engine-start-in:before {
  position: absolute;
  top: 18px;
  left: calc(50% - 13px);

  width: 26px;
  height: 8px;

  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;

  border-radius: 10px;
  background: green;
  background: #555;
}

a.btn-engine-start-in span {
  font-size: 10px;
}