.anim_box1{
  animation-name: zoomIn;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
  opacity: 0;
}

@keyframes zoomIn {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.arrow_box {
  position: relative;
  background: #FAEBBE;
}
.arrow_box:after {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(250, 235, 190, 0);
  border-right-color: #FAEBBE;
  border-width: 15px;
  margin-top: -15px;
}

.arrow_box2 {
  position: relative;
  background: #F1CD5E;
}
.arrow_box2:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(241, 205, 94, 0);
  border-top-color: #F1CD5E;
  border-width: 20px;
  margin-left: -20px;
}

.bg_pattern1 {
  background-color: #EFEFEF;
  opacity: 1;
  background-image:  radial-gradient(#CCCCCC 1px, transparent 1px), radial-gradient(#CCCCCC 1px, #EFEFEF 1px);
  background-size: 40px 40px;
  background-position: 0 0,20px 20px;
}

.bg_pattern2 {
  background-color: #DEDEDE;
  opacity: 1;
  background-image: radial-gradient(#BBBBBB 0.9px, #DEDEDE 0.9px);
  background-size: 18px 18px;
}

.bg_pattern3 {
  background-color: #CCCCCC;
  opacity: 1;
  background-image: linear-gradient(#DDDDDD 1.5px, transparent 1.5px), linear-gradient(to right, #DDDDDD 1.5px, #CCCCCC 1.5px);
  background-size: 30px 30px;
}

.border_b{
  border: 8px solid #C9E3F2;
}

.border_p{
  border: 8px solid #FCCECF;
}

.border_o{
  border: 8px solid #F1CD5E;
}

.star5{
  position:relative;
  line-height:1em;
  letter-spacing:.2em;
  color:#ccc;
  margin:0;
  padding:0;
}
.star5:before{
  content:"★★★★★";
  position:absolute;
  color:#F4810E;
  width:calc( 4.5em + .2 * ( 4.5em - .5em ) );
  overflow:hidden;
  white-space:nowrap;
}