@charset "utf-8";
/*=============================================
* :root
=============================================*/
:root {
}

#top_panels {
  height: 100vh;
  height: 100svh;
  width: 100%;
}

.panel {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 50%;
  justify-content: center;
  row-gap: 3.2rem;
}

#panel_clinic {
  background-color: var(--theme-clinic-color);
}

#panel_clinic .panel_title {
  width: 70.625%;
}

#panel_academy {
  background-color: var(--theme-academy-color);
}

#panel_academy .panel_title {
  width: 67.5%;
}

.common_btn {
  background-color: var(--theme-light-color);
  font-size: 1.2rem;
  line-height: 1.8rem;
  opacity: 1;
  padding: .5rem 0 .5rem .1em;
  text-decoration: none;
  transition-duration: .6s;
  transition-property: opacity;
  width: 18.8rem;
}

@media (any-hover: hover) {
  .common_btn:hover {
    opacity: 0.6;
    text-decoration: none;
  }
}

@media (any-hover: none) {
  .common_btn:active {
    opacity: 0.6;
    text-decoration: none;
  }
}

@media (min-width:768px) {
  #top_panels {
    display :flex;
  }

  .panel {
    height: 100%;
    width: 50%;
  }

  #panel_clinic {
    padding-top: 1rem;
    row-gap: 6.7rem;
  }

  #panel_clinic .panel_title {
    width: 31.2rem;
  }

  #panel_academy {
    row-gap: 4rem;
  }

  #panel_academy .panel_title {
    width: 29.8rem;
  }

  .common_btn {
    font-size: 1.4rem;
    line-height: 2.1rem;
    padding: .6rem 0 .6rem .1em;
    width: 22rem;
  }
}