#reservation .text-box {
  margin: 1.5rem 3rem 0;
}

.all {
  font-family: 'Raleway', sans-serif;
  background-image: radial-gradient(circle at center, #bfd2f7, #3de4f7be);
  background-size: cover;
  background-repeat: no-repeat;
  /* height: 250px; */
  /* overflow: hidden; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: radial-gradient(ellipse at bottom, #ffffff, #ffffff); */
  background: transparent;
  font-weight: 300;
}

.all {
  display: flex;
  -webkit-perspective: 10px;
  perspective: 10px;
  -webkit-transform: perspective(300px) rotateX(20deg);
  transform: perspective(300px) rotateX(20deg);
  will-change: perspective;
  -webkit-perspective-origin: center center;
  perspective-origin: center center;
  transition: all 1.3s ease-out;
  justify-content: center;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.all:hover,
.all.is-hover {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  transition: all 1s ease-out;
  -webkit-transform: perspective(10000px) rotateX(0deg);
  transform: perspective(10000px) rotateX(0deg);
}

/* is-hover: mobile */
.all.is-hover {
  margin: 0 5rem;
}

.all.is-hover .center1 {
  display: none;
}

.all:hover .text1,
.all.is-hover .text1 {
  opacity: 1;
}

.all:hover>div,
.all.is-hover>div {
  opacity: 1;
  transition-delay: 0s;
}

.all:hover .explainer,
.all.is-hover .explainer {
  opacity: 0;
}

.left1,
.center1,
.right1,
.lefter1,
.righter1 {
  width: 200px;
  height: 150px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  border-radius: 10px;
  border: 1px solid #fff;
  box-shadow: 0 0 10px 0px rgba(100, 100, 255, 0.2);
  opacity: 0;
  transition: all .3s ease;
  transition-delay: 1s;
  position: relative;
  background-position: center center;
  background-size: 70%;
  background-repeat: no-repeat;
  background-color: rgb(85, 212, 221);
  cursor: pointer;
  background-blend-mode: color-burn;
}

.left1:hover,
.center1:hover,
.right1:hover,
.lefter1:hover,
.righter1:hover {
  box-shadow: 0 0 20px 0px rgba(100, 100, 255, 0.4);
  background-color: #ccf;
}

.all-a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  bottom: -1.875rem;
}

.text1 {
  -webkit-transform: translateY(1.875rem);
  transform: translateY(1.875rem);
  opacity: 0;
  transition: all .3s ease;
  bottom: 0;
  left: 5px;
  position: absolute;
  will-change: transform;
  color: #000000;
  text-shadow: 0 0 5px rgba(100, 100, 255, 0.6);
  font-size: .8rem;
  white-space: nowrap;
}


.left1 {
  -webkit-transform: translateX(-30px) translateZ(-25px) rotateY(-5deg);
  transform: translateX(-30px) translateZ(-25px) rotateY(-5deg);
  background-image: url(/img/svg/bank.svg);
}

.center1 {
  opacity: 1;
  background-image: url(/img/svg/anketo.svg);
}

.right1 {
  -webkit-transform: translateX(30px) translateZ(-25px) rotateY(5deg);
  transform: translateX(30px) translateZ(-25px) rotateY(5deg);
  background-image: url(/img/svg/img/konin.svg);
}

.explainer {
  font-weight: 300;
  font-size: 1.8rem;
  color: #000000;
  transition: all .6s ease;
  width: 100%;
  height: 100%;
  background-color: #303050;
  background-image: radial-gradient(circle at center top, #cce, #33a);
  border-radius: 10px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.ref {
  background-color: #000;
  background-image: linear-gradient(to bottom, #d80, #c00);
  border-radius: 3px;
  padding: 7px 10px;
  position: absolute;
  font-size: 16px;
  bottom: 10px;
  right: 10px;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}

.ref::first-letter {
  font-size: 12px;
}