@charset "UTF-8";

/* 
  オープンカンパニー　テストページ 
*/

.fixed_menu_inner {
  display: flex;
}


.opencompany-fixed_menu_btn {
  transform: translateY(-410px);
  position: fixed;
  border-top-left-radius: 10px;
  background: linear-gradient(6deg, rgba(23, 107, 227, 1) 0%, rgba(57, 192, 249, 1) 80%, rgba(119, 227, 255, 1) 100%);
  width: 40px;
  right: 10px;
  padding: 12px 20px 20px;
  font-size: 13px;
  text-decoration: none;
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: column;
  color: #FFFFFF;
  z-index: 50;
}

.opencompany-fixed_menu_btn1 {
  height: 190px;
  /*transition: height 0.5s ease;*/
  /*transition: width 0.5s ease;*/
}

.opencompany-fixed_menu_btn2 {
  height: 130px;
  transform: translateY(-230px);

}

.opencompany-fixed_menu_btn3 {
  height: 90px;
  transform: translateY(-110px);

}

.opencompany-fixed_menu_btn4 {
  height: 210px;
  transform: translateY(-20px);

}



.active-fixed-button {
  position: fixed;
  animation: slide-down 0.6s ease-out forwards;

}


@keyframes slide-down {
  0% {
    transform: translateY(-800px);
    /* 初期位置：画面外上部 */
    opacity: 0;
    /* 非表示 */
  }

  100% {
    transform: translateY(-410px);
    /* 最終位置：元の位置 */
    opacity: 1;
    /* 表示 */
  }
}


.out-active-fixed-button4 {
  position: fixed;
  animation: slide-up4 0.7s ease-out forwards;
}

@keyframes slide-up4 {
  0% {
    transform: translateY(-30px);
    /* 初期位置：画面外上部 */
    opacity: 1;
    /* 非表示 */
  }

  100% {
    transform: translateY(-800px);
    /* 最終位置：元の位置 */
    opacity: 0;
    /* 表示 */
  }
}

.out-active-fixed-button3 {
  position: fixed;
  animation: slide-up3 0.6s ease-out forwards;
}

@keyframes slide-up3 {
  0% {
    transform: translateY(-115px);
    /* 初期位置：画面外上部 */
    opacity: 1;
    /* 非表示 */
  }

  100% {
    transform: translateY(-800px);
    /* 最終位置：元の位置 */
    opacity: 0;
    /* 表示 */
  }
}

.out-active-fixed-button2 {
  position: fixed;
  animation: slide-up2 0.5s ease-out forwards;
}

@keyframes slide-up {
  0% {
    transform: translateY(-450px);
    /* 初期位置：画面外上部 */
    opacity: 1;
    /* 非表示 */
  }

  100% {
    transform: translateY(-800px);
    /* 最終位置：元の位置 */
    opacity: 0;
    /* 表示 */
  }
}

.out-active-fixed-button {
  position: fixed;
  animation: slide-up 0.4s ease-out forwards;
}




.active-fixed-button:hover {
  width: 200px;

}

/*
.opencompany-fixed_menu_btn:hover {
  writing-mode: horizontal-tb;
}
*/

.icon-only {
  height: 50px;
}


.icon-only::before {
  font-family: "Font Awesome 5 Free";
  content: "\f02d";
  font-size: 24px;
  font-weight: 900;
  margin-left: -10px;
}

/*# sourceMappingURL=style.css.map */