@charset "UTF-8";

/* Scss Document */

/*****************************************************************/

.eachTextAnime span {

  opacity: 0; }



.eachTextAnime.appeartext span {

  animation: text_anime_on 1.5s ease-out forwards; }



@keyframes text_anime_on {

  0% {

    opacity: 0; }

  100% {

    opacity: 1; } }

/*****************************************************************/

.scroll_box01 {

  opacity: 0;

  -ms-overflow-style: none; }



.scroll_box02 {

  opacity: 0; }



.scroll_box03 {

  opacity: 0;

  -ms-overflow-style: none; }

  .scroll_box03 .scroll_box::-webkit-scrollbar {

    display: none; }



.scroll_box04 {

  opacity: 0;

  -ms-overflow-style: none; }

  .scroll_box04 .scroll_box::-webkit-scrollbar {

    display: none; }



.info_item.active .scroll_box01 {

  animation-name: scroll_box01;

  animation-duration: 1.5s;

  /*アニメーション変化時間 ※デフォルト*/

  animation-fill-mode: forwards;

  animation-delay: 0.5s; }

.info_item.active .scroll_box02 {

  animation-name: scroll_box02;

  animation-duration: 1.5s;

  /*アニメーション変化時間 ※デフォルト*/

  animation-fill-mode: forwards;

  animation-delay: 1.0s; }

.info_item.active .scroll_box03 {

  animation-name: scroll_box03;

  animation-duration: 1.5s;

  /*アニメーション変化時間 ※デフォルト*/

  animation-fill-mode: forwards;

  animation-delay: 1.5s; }

.info_item.active .scroll_box04 {

  animation-name: scroll_box04;

  animation-duration: 1.5s;

  /*アニメーション変化時間 ※デフォルト*/

  animation-fill-mode: forwards;

  animation-delay: 2.0s; }



@keyframes scroll_box01 {

  0% {

    opacity: 0; }

  100% {

    opacity: 1; } }

@keyframes scroll_box02 {

  0% {

    opacity: 0; }

  100% {

    opacity: 1; } }

@keyframes scroll_box03 {

  0% {

    opacity: 0; }

  100% {

    opacity: 1; } }

@keyframes scroll_box04 {

  0% {

    opacity: 0; }

  100% {

    opacity: 1; } }

/************************************************************/

/*About us .greething*/

.greething {

  position: relative;

  opacity: 0;

  top: 100px; }

  .greething.active {

    animation-name: greething;

    animation-duration: 2s;

    animation-fill-mode: forwards;

    animation-delay: 0.5s; }



@keyframes greething {

  0% {

    opacity: 0;

    top: 100px; }

  100% {

    top: 0;

    opacity: 1; } }

/************************************************************/

/*About us .training*/

.training {

  position: relative;

  top: 100px;

  opacity: 0; }

  .training.active {

    animation-name: training;

    animation-duration: 2s;

    animation-fill-mode: forwards;

    animation-delay: 0.5s; }



@keyframes training {

  0% {

    top: 100px;

    opacity: 0; }

  100% {

    top: 0;

    opacity: 1; } }

/************************************************************/

/*About us link*/

.link {

  overflow: hidden; }

  .link a {

    position: relative;

    bottom: -240px;

    opacity: 0; }

  .link.active a.staff {

    animation-name: link-staff;

    animation-duration: 2s;

    animation-fill-mode: forwards;

    animation-delay: 0.5s; }

  .link.active a.hospitals {

    animation-name: link-hospitals;

    animation-duration: 2s;

    animation-fill-mode: forwards;

    animation-delay: 1.0s; }

  .link.active a.cooperation {

    animation-name: link-cooperation;

    animation-duration: 2s;

    animation-fill-mode: forwards;

    animation-delay: 1.5s; }

  .link.active a.heart {

    animation-name: link-heart;

    animation-duration: 2s;

    animation-fill-mode: forwards;

    animation-delay: 2.0s; }

  .link.active a:hover {

    color: #589cd5; }

    .link.active a:hover:after {

      border-radius: 15px;

      position: absolute;

      content: "";

      width: 99%;

      height: 99%;

      display: block;

      top: 50%;

      left: 50%;

      -webkit-transform: translate(-50%, -50%);

      /* Safari用 */

      transform: translate(-50%, -50%);

      border: #c1d6ea 2px solid; }

    .link.active a:hover span {

      color: #589cd5; }



@keyframes link-staff {

  0% {

    bottom: -240px;

    opacity: 0; }

  100% {

    bottom: 0;

    opacity: 1; } }

@keyframes link-hospitals {

  0% {

    bottom: -240px;

    opacity: 0; }

  100% {

    bottom: 0;

    opacity: 1; } }

@keyframes link-cooperation {

  0% {

    bottom: -240px;

    opacity: 0; }

  100% {

    bottom: 0;

    opacity: 1; } }

@keyframes link-heart {

  0% {

    bottom: -240px;

    opacity: 0; }

  100% {

    bottom: 0;

    opacity: 1; } }

/************************************************************/

/*About us .training*/

.medical_box {

  position: relative;

  top: 100px;

  opacity: 0; }

  .medical_box.active {

    animation-name: medical_box;

    animation-duration: 2s;

    animation-fill-mode: forwards;

    animation-delay: 0.5s; }



@keyframes medical_box {

  0% {

    top: 100px;

    opacity: 0; }

  100% {

    top: 0;

    opacity: 1; } }