@import url("../../common/css/base.css?ver=1.1") layer(common);
@import url("../../business/css/base.css?ver=1.1") layer(base);
@import url("/components/contact-info.css") layer(contact-info);
@import url("/components/media-card.css") layer(media-card);

@layer custom {
  #medium_v {
    img {
      @media (max-width: 768px) {
        object-fit: cover;
        object-position: left;
        aspect-ratio: 768 / 358;
      }
    }
  }

  .pc-only {
    @media (max-width: 768px) {
      display: none;
    }
  }

  @counter-style circled-numbers {
    system: cyclic;
    symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩";
    suffix: " ";
  }

  .gray_sec {
    background-color: #f7f7f7;
  }

  #features_sec {
    margin-top: 5rem;
    padding-bottom: 5rem;

    .image_box {
      margin-top: 2rem;
    }
  }

  #records_sec{
    .image_box {
      margin-top: 2rem;
      
      @media(min-width: 769px){
        max-width: 70rem;
        margin-inline: auto;
      }
    }
  }

  #records_sec,
  #support_sec {
    padding-bottom: 5rem;
  }

  .contract-terms {
    list-style-type: circled-numbers;
    margin-left: 2rem;

    & em {
      font-weight: bold;
      font-style: normal;
    }
  }

  .bfaf_images {
    margin-top: 3rem;
    margin-left: auto;

    @media (min-width: 769px) {
      width: 50%;
    }

    & img {
      object-fit: cover;
      aspect-ratio: 4 / 3;
    }
  }

  .table_area {
    margin-top: 2rem;
    position: relative;
    .table_border {
      position: relative;

      &::after {
        content: "";
        position: absolute;
        border-right: 1px solid #cfcfcf;
        right: 0;
        top: 0;
        bottom: 2rem;
        pointer-events: none;
      }
    }

    .table_frame {
      position: relative;

      @media screen and (max-width: 768px) {
        padding-bottom: 2rem;
        overflow-x: auto;
      }

      &.js-scroll {
        @media screen and (max-width: 768px) {
          &::after {
            display: block;
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: ease-out 0.6s all;
            z-index: 10;
            background: url(../../common/img/icon_scroll.svg) center center
              no-repeat;
            background-size: 24rem auto;
            cursor: pointer;
          }

          &.ok::after {
            pointer-events: none;
            opacity: 0;
          }
        }
      }
    }

    table {
      position: relative;
      border-collapse: collapse;
      border-spacing: 0;
      width: 100%;

      @media screen and (max-width: 768px) {
        width: 180rem;
      }

      & td,
      & th {
        position: relative;
        border-collapse: collapse;
        border: #cfcfcf 1px solid !important;
        letter-spacing: 0.05em;
        text-align: left;
        vertical-align: top;
        font-weight: 400;

        @media screen and (min-width: 769px) {
          padding: 1.5rem 2rem;
          line-height: 1.5em;
          font-size: 1.6rem;
        }
        @media screen and (max-width: 768px) {
          padding: 2rem 3rem;
          line-height: 1.5em;
          font-size: 3.2rem;
        }
      }

      & th {
        background: #f1eee6;
        font-weight: 500;
      }

      & tbody,
      & thead {
        position: relative;
      }

      & thead th {
        text-align: center;

        @media screen and (min-width: 769px) {
          padding: 1.5rem 0;
        }
        @media screen and (max-width: 768px) {
          padding: 2rem 0;
        }

        &:first-of-type {
          @media screen and (max-width: 768px) {
            position: sticky;
            border: 0 !important;
            left: 0;
            z-index: 2;
          }
          &::before {
            @media screen and (max-width: 768px) {
              content: "";
              position: absolute;
              border: 1px solid #cfcfcf;
              inset: -0.5px -1px -0.5px 0;
              pointer-events: none;
            }
          }
        }
      }

      & tbody th {
        @media screen and (min-width: 769px) {
          width: 20%;
          padding: 1.5rem 2rem;
        }
        @media screen and (max-width: 768px) {
          width: 13%;
          position: sticky;
          border: 0 !important;
          left: 0;
          z-index: 2;
          padding: 2rem 1rem 2rem 2.5rem;
        }
        &::before {
          @media screen and (max-width: 768px) {
            content: "";
            position: absolute;
            border: 1px solid #cfcfcf;
            inset: -0.5px -1px -0.5px 0;
            pointer-events: none;
          }
        }
      }

      & tbody td {
        vertical-align: middle;
        background: white;

        @media screen and (min-width: 769px) {
          padding: 1.5rem 2rem;
        }
        @media screen and (max-width: 768px) {
          padding: 2rem 3rem;
        }

        &:last-of-type {
          background: #e5f0f7;
        }
      }
    }
  }

  .service_box {
    line-height: 1.7em;
    display: grid;
    gap: 2rem;
    margin-top: 2rem;

    font-size: 2.8rem;
    row-gap: 1rem;

    @media (min-width: 769px) {
      font-size: 1.6rem;
      row-gap: 0.5rem;
      grid-template-columns: 1fr 2fr;
    }
  }

  .service_for {
    border: solid 2px transparent;
    background-color: #fff;
    padding: 2rem;

    & li {
      display: flex;
      column-gap: 1rem;

      &::before {
        content: "";
        flex-shrink: 0;
        background-image: url(../img/index/check01.svg);
        background-repeat: no-repeat;
        background-size: contain;
        border-radius: 50%;
        width: 1.143em;
        height: 1.143em;
        translate: 0 29.375%;
      }
    }

    &.owner {
      border-color: #baa86980;

      & li {
        &::before {
          background-color: #3486c2;
        }
      }
    }

    &.tenant {
      border-color: #e7b4b380;

      & ul{
        
        @media (min-width: 769px) {
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: repeat(4, 1fr);
          column-gap: 1rem;
        }
      }

      & li {
        &::before {
          background-color: #5c9ece;
        }
      }
    }
  }

  em{
    font-weight: bold;
    font-style: normal;
  }
}