.button {
  position: relative;
  z-index: 2;
  background-color: #800000;
  border: 2px solid #333;
  color: #fff;
  line-height: 50px;
}
.button:hover {
  background-color: #fff;
  border-color: #59b1eb;
  color: #59b1eb;
}
.button::before,
.button::after {
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #333;
}
.button::before {
  right: 0;
}
.button::after {
  left: 0;
}
.button:hover::before,
.button:hover::after {
  width: 0;
  background-color: #59b1eb;
}


.figure, .figure12 img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.figure:hover img {
  -webkit-transform: scale(2.0);
  transform: scale(2.0);
  opacity: 0.7;
}
/*--
.figure12 img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
--*/

.figure12:hover img {
  -webkit-transform: scale(12.0);
  transform: scale(12.0);
  opacity: 1.0;
}

/* 画像のマウスオーバー時に回転する */
.rotation img {
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
}

.rotation img:hover {
  -webkit-transform: rotate(360deg) scale(4.0);
  transform: rotate(360deg) scale(4.0);
}

.rotation10 img {
    -webkit-transition: 0.6s ease-in-out;
    transition: 0.6s ease-in-out;
}

.rotation10 img:hover {
  -webkit-transform: rotate(360deg) scale(15.0);
  transform: rotate(360deg) scale(15.0);
}

.rotationY10 img {
    -webkit-transition: 0.6s ease-in-out;
    transition: 0.6s ease-in-out;
}

.rotationY10 img:hover {
  -webkit-transform: rotateY(360deg) scale(15.0);
  transform: rotateY(360deg) scale(15.0);
}

/* 画像のマウスオーバー時に90°回転する */
.rotation_90 img {
    -webkit-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}

.rotation_90 img:hover {
  -webkit-transform: rotate(90deg) scale(1.0);
  transform: rotate(90deg) scale(1.0);
}

/* 画像のマウスオーバー時に180°回転する */
.rotation_180 img {
    -webkit-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}

.rotation_180 img:hover {
  -webkit-transform: rotate(180deg) scale(1.0);
  transform: rotate(180deg) scale(1.0);
}


/* slide-modify  goto-Homeボタン */
.btn-flat-simple {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #00BCD4;
  background: #ECECEC;
  transition: .4s;
}

.btn-flat-simple:hover {
  background: #00bcd4;
  color: white;
}




.button-sample{
  margin: 0;
  padding: 0;
  text-align: center;
}

.button-sample .flat-button02 {
  display: inline-block;
  padding: 8px 40px;
  text-decoration: none;
  color: #FFF;
  font-weight: bold;
  font-size: 16px;
  background: #6681a5;
  border: solid 1px #6681a5;
  border-radius: 30px;
  transition: .4s;
}

.button-sample .flat-button02:hover {
  background: #FFF;
  border: solid 1px #6681a5;
  color: #6681a5;
}