@charset "UTF-8";


.page-hotel-operation .facility .btn_viewMore.w-full {
  width: 100%;
  margin-top: 25px;

  & a {
    justify-content: center;
    grid-column-gap: 1em;
    background-color: #fff;
    overflow: hidden;

    span {position: relative;transition: all .6s;color: #CAB15D;}

    &:after {
      position: static;
      margin: auto 0;
      z-index: 1;

      background-image: url(../images/hotel_operation/viewmore-blank.png);
    }

    &:before {
      content: "";
      width: 100%;
      height: 100%;

      background-color: #CAB15D;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }

    &:hover:after {background-image: url(../images/hotel_operation/viewmore-blank_white.png);}
    &:hover span {
      color: #fff;
    }

    &.is-hover:after {
      /* background-image: url(../images/hotel_operation/viewmore-blank.png); */
    }
    &.is-hover:before {

      transform: scaleX(1);
      transform-origin: left;
      transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
  }
}


.facility-wrap.works_section {
  margin-top: 25px;

  & .works-thumb {
    width: 100%;
    aspect-ratio: 380 / 240;
    object-fit: cover;
    display: block;
  }

  & .informationBox .name {
    border-bottom: 1px solid #c4ad5c;
    padding: 0.65em 0;
  }

  & .facility-list-wraps {
    /* display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    flex-direction: column;
    gap: 25px; */
  }

  & .informationBox {
    font-size: 1.5rem;

    & dl {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;

      &.items-center {align-items: center;}

      margin-top: 0.95em;
      &:not(:first-child){margin-top: 0.75em;}


      & dt {
        width: 100px;
      }

      & dd.label {
        font-size: 1.4rem;
        padding: 0.1em 0.75em;
        color: #fff;

        &.partner {background-color: #a08730;}
        &.consulting {background-color: #00324e;}
        &.sublease {background-color: #405a21;}
      }
    }
  }
  & .informationBox .name {
    font-size: 1.8rem;
  }
}
/* .facility-wrap.works_section */

.wrap_inner.banner_area {margin-top: 50px;}


/* list fadein */
.facility-list-wraps.js_trigger_fadeinup {
  transform: translateY(0%);
  & .facility-card {
    &:not(:first-child){margin-top: 50px;}

    opacity: 0;
    transform: translateY(14%);
    transition: transform 800ms, opacity 800ms;
  }

  &.active {
    .facility-card {
      opacity: 1;
      transform: translateY(0);

      &:nth-child(1)  { transition-delay: 0ms; }
      &:nth-child(2)  { transition-delay: 125ms; }
      &:nth-child(3)  { transition-delay: 250ms; }
      &:nth-child(4)  { transition-delay: 375ms; }
      &:nth-child(5)  { transition-delay: 500ms; }
      &:nth-child(6)  { transition-delay: 625ms; }
      &:nth-child(7)  { transition-delay: 750ms; }
      &:nth-child(8)  { transition-delay: 875ms; }
      &:nth-child(9)  { transition-delay: 1000ms; }
      &:nth-child(10) { transition-delay: 1125ms; }
      &:nth-child(11) { transition-delay: 1250ms; }
      &:nth-child(12) { transition-delay: 1375ms; }
    }
  }

}


@media (min-width: 1080px) {
  .page-hotel-operation .facility .btn_viewMore.w-full {margin-top: 25px;}
  .facility-wrap.works_section {
    margin-top: 50px;
    & .facility-card {
      margin-top: 0;
      &:not(:first-child){margin-top: 0;}
      max-width: 380px;
      width: calc(380% / 12.00);
    }

    & .facility-list-wraps {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      gap: calc(30% / 12.00);
      grid-row-gap: 50px;
    }

    & .informationBox {
      font-size: 1.6rem;

      & dl {
        margin-top: 0.95em;
        &:not(:first-child){margin-top: 0.75em;}

        & dt {
          width: 120px;
        }

        & dd.label {
          font-size: 1.5rem;
        }
      }
    }

    & .informationBox .name {
      font-size: 2rem;
    }
  }
  /* .facility-wrap.works_section */

  .wrap_inner.banner_area {margin-top: 100px;}

  .page-hotel-operation .facility .btn_viewMore.w-full a:after {
    width: 18px;height: 18px;
  }
}