/* CSS Document */
.main_col .inner .greet {
  padding: 20px; }
  @media (min-width: 768px) {
    .main_col .inner .greet {
      padding: 40px 150px; } }
  .main_col .inner .greet p + p {
    margin-top: 40px; }
  .main_col .inner .greet p.name {
    text-align: right;
    font-size: 1.6rem; }
    @media (min-width: 768px) {
      .main_col .inner .greet p.name {
        font-size: 3rem; } }
    .main_col .inner .greet p.name span {
      font-size: 1.4rem;
      display: block; }
      @media (min-width: 768px) {
        .main_col .inner .greet p.name span {
          font-size: 1.8rem; } }
.main_col .inner .facity_ph {
  padding: 20px; }
  @media (min-width: 768px) {
    .main_col .inner .facity_ph {
      padding: 40px 0px; } }
  .main_col .inner .facity_ph .img {
    width: 100%; }

.cards {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 20px 0 80px;
  margin-bottom: -60px; }
  @media (min-width: 768px) {
    .cards {
      padding: 20px 0 80px;
      margin-bottom: -60px;
      grid-template-columns: 1fr 1fr; } }
  .cards .card {
    font-size: 1.8rem;
    transition: 0.3s ease-in-out;
    border-radius: 8px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    background: #fff; }
    .cards .card .imgbox {
      display: block;
      border-radius: 8px 8px 0 0;
      width: 100%;
      aspect-ratio: 16 / 9;
      overflow: hidden; }
      .cards .card .imgbox img {
        display: block;
        border-radius: 8px 8px 0 0;
        width: 100%;
        aspect-ratio: 16 / 9;
        transform: scale(1.2, 1.2);
        transform-origin: top center;
        transition: .7s all;
        object-fit: cover;
        object-position: center; }
    .cards .card h2 {
      color: #00913a;
      text-align: center;
      margin: 0;
      transition: 0.3s ease-in-out; }
    .cards .card p {
      padding: 5px;
      color: #fff;
      font-size: 1.6rem;
      text-align: right;
      background: linear-gradient(70deg, #00913a 0%, #8bc120 100%);
      border-radius: 0 0 8px 8px;
      position: relative;
      padding-right: 40px; }
      .cards .card p::before {
        position: absolute;
        right: 10px;
        content: "";
        display: inline-block;
        border-radius: 30px;
        background: #fff;
        width: 25px;
        height: 25px;
        margin: auto;
        top: 0;
        bottom: 0; }
      .cards .card p::after {
        position: absolute;
        right: 15px;
        top: 12px;
        content: "";
        display: inline-block;
        width: 12px;
        aspect-ratio: cos(30deg)/1;
        clip-path: polygon(0 0, 0% 100%, 100% 50%);
        background: #8bc120;
        display: block;
        margin: auto; }
    .cards .card:hover {
      transform: translateY(-2px);
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.5); }
      .cards .card:hover .imgbox img {
        transform: scale(1.1, 1.1);
        transition: .7s all; }
      .cards .card:hover h2 {
        color: #fff;
        background: #00913a;
        text-align: center;
        margin: 0; }