@charset "UTF-8";

/* =====================
  reset
===================== */
.aside {
  margin-block: 40px 0;

  @media (width <= 768px) {
    margin-block: calc((100 / 390) * 40 * 1vw) 0;
  }
}

/* =====================
  introduction
===================== */
.introduction {
  padding-block: 90px 158px;

  @media (width <= 768px) {
    padding-block: 16vw;
  }

  /* ==== img ==== */
  .img {
    position: relative;

    & img {
      display: block flow;
      margin-inline: auto;
    }

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column-reverse;
      gap: calc((100 / 390) * 20 * 1vw);
    }

    /* ==== p ==== */
    .lead {
      font-size: 32px;
      font-weight: 400;
      color: var(--text-primary);

      @media (width > 768px) {
        & span {
          display: block flow;
        }

        position: absolute;
        inset-block-end: 38px;
        inset-inline-end: 102px;
      }

      @media (width <= 768px) {
        font-size: calc((100 / 390) * 20 * 1vw);
        text-align: center;
      }
    }
  }

  /* ==== body ==== */
  .body {
    margin-block-start: 60px;

    @media (width > 768px) {
      padding-inline: 40px;
    }

    @media (width <= 768px) {
      margin-block-start: calc((100 / 390) * 20 * 1vw);
    }
  }
}

/* =====================
  portfolio
===================== */
.portfolio {
  padding-block: 152px 163px;
  background: white;

  @media (width <= 768px) {
    padding-block: 16vw 24vw;
  }

  /* =====================
    tab
  ===================== */
  .wrap {
    padding-block: 51px 0;
    margin-inline: auto;

    @media not all and (width >= 768px) {
      padding-block: calc((100 / 360) * 58 * 1vw) calc((100 / 360) * -2 * 1vw);
    }

    /* ==== section ==== */
    & section {
      @media (width <= 768px) {
        .inner {
          overflow-x: scroll;
          padding-block-end: 2vw;
          
          
          

          & table {
            inline-size: 100vmax;
          }
        }
      }
    }

    & section + section {
      margin-block-start: 46px;

      @media not all and (width >= 768px) {
        margin-block-start: calc((100 / 360) * 40 * 1vw);
      }
    }
  }

  /* ==== h3 ==== */
  & h3 {
    padding-block-end: 5px;
    font-size: 25px;
    font-weight: 700;
    color: var(--text-primary);
    border-bottom: 1px dashed #8b8b8b;

    @media (width <= 768px) {
      padding-block-end: calc((100 / 390) * 6 * 1vw);
      font-size: calc((100 / 390) * 18 * 1vw);
    }
  }

  /* ==== tab ==== */
  [role='tablist'] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 9px 10px;
    max-inline-size: 1040px;
    padding-block: 0 43px;
    margin-inline: auto;

    @media not all and (width >= 768px) {
      grid-template-columns: repeat(2, 1fr);
      gap: calc((100 / 360) * 10 * 1vw);
    }
  }

  [role='tab'] {
    display: grid;
    justify-content: center;
    padding-block: 15px 19px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    color: #888;
    background: #f1f3f4;
    border-radius: calc(1px / 0);
    transition: background-color 250ms, color 250ms;

    @media (width <= 768px) {
      padding-block: calc((100 / 360) * 15 * 1vw);
      font-size: calc((100 / 360) * 12 * 1vw);
    }

    &[aria-selected='true'] {
      color: var(--primary);
      pointer-events: none;

      @media (width <= 768px) {
        position: sticky;
        top: 23.6vw;
        transition: top 250ms ease 100ms;
        will-change: top;
      }
    }
  }

  /* ==== tabpanel ==== */
  [role='tabpanel'] {
    table {
      @media (width > 768px) {
        inline-size: 1120px;
      }

      margin-block-start: 40px;
      margin-inline: auto;

      @media not all and (width >= 768px) {
        margin-block-start: calc((100 / 360) * 20 * 1vw);
      }

      :where(th, td) {
        padding-block: 10.6px;
        padding-inline: 11px;
        font-size: 14px;
        border: 1px solid #c3c4c7;

        @media not all and (width >= 768px) {
          padding-block: calc((100 / 360) * 6 * 1vw);
          padding-inline: calc((100 / 360) * 8 * 1vw);
          font-size: calc((100 / 360) * 12 * 1vw);
        }
      }

      thead {
        th {
          font-size: 16px;
          font-weight: 500;
          text-align: center;
          background: #e4f2ff;

          @media not all and (width >= 768px) {
            font-size: calc((100 / 360) * 12 * 1vw);
            white-space: nowrap;
          }

          &:first-child {
            inline-size: 100px;

            @media not all and (width >= 768px) {
              inline-size: calc((100 / 360) * 60 * 1vw);
            }
          }

          &:nth-child(2) {
            inline-size: 737px;

            @media (width <= 768px) {
              inline-size: 50%;
            }
          }

          &:nth-child(3) {
            inline-size: 180px;

            @media (width <= 768px) {
              inline-size: 9%;
            }
          }

          &:nth-child(4) {
            @media (width <= 768px) {
              inline-size: calc((100 / 360) * 100 * 1vw);
            }
          }
        }
      }

      & tbody td:first-child {
        text-align: center;
      }
    }
  }
}

@media not all and (width >= 768px) {
  body.touch-menu-on {
    .section[data-id='works'] {
      & button[aria-selected='true'] {
        top: 20vw;
      }
    }
  }
}