@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 {
  .kv_ttl_set {
    & p {
      color: #333;
    }
  }

  .mt_1 {
    margin-top: 1em;
  }

  .mt_2 {
    margin-top: 2em;
  }

  h2,
  h3 {
    font-weight: 500;
    line-height: 1.5em;
    letter-spacing: 0.05em;
  }

  h2{
    @media(max-width: 768px){
      font-size: 4rem;
    }
  }

  .checklist {
    background-color: #fff;

    & 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%;
        background-color: #3486c2;
      }
    }
  }

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

  .main_img {
    & img {
      display: block;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      object-position: bottom;
      margin-inline: auto;

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

  .contract_img {
    & img {
      display: block;
      aspect-ratio: 16 / 9;
      object-fit: contain;
      /* object-position: bottom; */
      margin-inline: auto;

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

  .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%;
      table-layout: fixed;

      @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: 2.8rem;
        }
      }

      & 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 {
          width: 15%;
          @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 {
        vertical-align: middle;
        
        @media screen and (min-width: 769px) {
          width: 15%;
          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;
        }
      }
    }
  }

  .link_list {
    @media(max-width: 768px) {
      font-size: 2.5rem;
    }
    @media(min-width: 769px) {
      text-align: right;
    }
  }

  #contact-info {
    background: #f7f7f7;
    margin-top: 5rem;
    padding-bottom: 6rem;
  }

  #business_nav_sec {
    margin-top: 0;
    border-top: none;
  }

  .underline {
    text-decoration: underline;
  }

  #medium_kv{
    height: auto;
    padding: 5rem 4rem 4rem;
  }

  .table_of_contents {
    border: 1px solid #cfcfcf;
    padding: 3rem 4rem;
    border-radius: 1rem;
  }
}