@charset "UTF-8";

/* =====================
  contents
===================== */
main .contents {
  padding-block: 99px 104px;

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

    .u-title {
      & [lang='en'] {
        font-size: calc((100 / 750) * 80 * 1vw);
      }
    }

    .u-inner {
      padding-inline: calc((100 / 750) * 20 * 1vw);
    }
  }
}

/* =====================
  gallery
===================== */
section[data-url='gallery'] {
  padding-block: 93px 84px;

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

  .works-list {
    margin-block: 101px 0;

    @media (width <= 768px) {
      margin-block: 9.5vw 0;
    }

    & ul {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 52px 50px;

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

      & li {
        margin-block: calc((1em - 1lh) / 2);
      }

      /* ==== place ==== */
      .place {
        padding-inline: 16px;
        padding-bottom: 12px;
        margin-block: calc((1em - 1lh) / 2);
        font-size: 20px;
        font-weight: 400;
        color: var(--primary);
        background: rgb(127 179 214 / 40%);
        border-radius: 20px 0 0;

        @media (width <= 768px) {
          padding-inline: 3.4vw;
          padding-bottom: 2.8vw;
          font-size: calc((100 / 750) * 32 * 1vw);
          border-radius: calc((100 / 750) * 40 * 1vw) 0 0;
        }
      }

      /* ==== img ==== */
      .picture {
        display: block flow;
        margin-block: calc((1em - 1lh) / 2);
        border-radius: 0 0 20px;

        @media (width <= 768px) {
          border-radius: 0 0 calc((100 / 750) * 40 * 1vw);
        }
      }

      /* ==== title ==== */
      .title {
        padding-block: 8px;
        padding-inline: 16px;
        margin-block: calc((1em - 1lh) / 2);
        font-weight: 400;

        @media (width <= 768px) {
          padding-block: 2.6vw;
          padding-inline: calc((100 / 750) * 24 * 1vw);
          font-size: calc((100 / 750) * 28 * 1vw);
        }
      }

      .title[aria-hidden='true'] {
        block-size: 3em;
      }
    }
  }
}

/* =====================
  others
===================== */
section[data-url='others'] {
  --_bg-color: rgb(127 179 214 / 40%);

  /* ==== title ==== */
  .title {
    padding-block: 10px;
    padding-inline: 15px;
    margin-block: calc((1em - 1lh) / 2);
    font-size: 20px;
    font-weight: 400;
    color: var(--primary);
    background: var(--_bg-color);

    @media (width <= 768px) {
      padding-block: 2vw;
      padding-inline: 3.3vw;
      font-size: calc((100 / 750) * 32 * 1vw);
      border-radius: calc((100 / 750) * 40 * 1vw) 0 0;
    }
  }

  /* ==== other-list ==== */
  .other-list {
    max-inline-size: 900px;
    margin-block-start: 87px;
    margin-inline: auto;
    overflow: hidden;
    font-size: 20px;
    font-weight: 400;
    border-radius: 20px 0;

    @media (width <= 768px) {
      margin-block-start: calc((100 / 750) * 48 * 1vw);
      font-size: calc((100 / 750) * 28 * 1vw);
      border-radius: calc((100 / 750) * 40 * 1vw) 0;
    }

    & ul {
      display: table;
      inline-size: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      background: white;

      & li {
        display: table-row;

        & span {
          display: table-cell;
        }

        .th {
          inline-size: 190px;
          padding-block: 12.1px;
          padding-inline: 20px;
          border-block-end: 1px solid var(--_bg-color);
          border-inline: 1px solid var(--_bg-color);

          @media (width <= 768px) {
            inline-size: calc((100 / 750) * 151 * 1vw);
            padding-block: calc((100 / 750) * 50.6 * 1vw);
            padding-inline: calc((100 / 750) * 18 * 1vw);
            vertical-align: middle;
            word-break: auto-phrase;
          }
        }

        .td {
          padding-inline: 20px;
          border-block-end: 1px solid var(--_bg-color);
          border-inline-end: 1px solid var(--_bg-color);

          @media (width <= 768px) {
            padding-inline: 2.4vw 5.4vw;
            vertical-align: middle;
            word-break: auto-phrase;
          }
        }
      }
    }
  }
}