@charset "UTF-8";

main .contents {
  padding-block: 106px 24px;

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

  /* =====================
    Message
  ===================== */
  & section[data-url='message'] {
    padding-block-end: 104px;
    background: linear-gradient(180deg, var(--bg) 0%, white 100%);

    @media (width <= 768px) {
      padding-block-end: calc((100 / 750) * 60 * 1vw);
    }

    .u-inner {
      display: block grid;
      grid-template-columns: 500px auto;
      gap: 56px 75px;
      align-items: center;
      justify-content: space-between;

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

      .head {
        grid-area: 1 / 2 / 2 / 3;
        margin-block: calc((1em - 1lh) / 2);
      }

      .description {
        grid-area: 2 / 2 / 3 / 3;
        margin-block: calc((1em - 1lh) / 2);

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

      .author {
        display: block flex;
        grid-area: 3 / 2 / 4 / 3;
        gap: 27px;
        align-items: baseline;
        justify-content: flex-end;
        margin-block: calc((1em - 1lh) / 2);

        @media (width <= 768px) {
          gap: calc((100 / 750) * 27 * 1vw);
          align-self: flex-end;
          margin-block-start: calc((100 / 750) * 46 * 1vw);
        }

        & dt {
          font-weight: 500;
        }

        & dd {
          margin-block: calc((1em - 1lh) / 2);
          font-family: var(--yumin);
          font-size: 32px;
          font-weight: 600;

          @media (width <= 768px) {
            font-size: calc((100 / 750) * 48 * 1vw);
          }
        }
      }

      .picture {
        grid-area: 1 / 1 / 4 / 2;
        margin-block: calc((1em - 1lh) / 2);

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

  /* =====================
    Profile
  ===================== */
  & section[data-url='profile'] {
    padding-block: 101px 102px;
    background: white;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 90 * 1vw) 0;

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

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

    .inner {
      padding-block: 76px;
      padding-inline: 80px;
      background: #e6fcff;
      border-radius: 40px;

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

      & dl {
        display: table;
        inline-size: 100%;
        margin-block-start: 87px;
        table-layout: fixed;
        border-collapse: collapse;

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

        .tr {
          --_border-color: #d9d9d9;

          display: table-row;
          border-block-start: 1px solid var(--_border-color);

          &:last-child {
            border-block-end: 1px solid var(--_border-color);
          }

          & :where(dt, dd) {
            display: table-cell;
            padding-block: 39.2px;
            padding-inline: 40px;
            vertical-align: middle;

            @media (width <= 768px) {
              padding-block: calc((100 / 750) * 38.4 * 1vw);
              padding-inline: calc((100 / 750) * 20 * 1vw);
            }
          }
        }

        & dt {
          inline-size: 279px;
          font-weight: 700;

          @media (width <= 768px) {
            inline-size: calc((100 / 750) * 200 * 1vw);
          }
        }
      }
    }
  }

  /* =====================
    History
  ===================== */
  & section[data-url='history'] {
    padding-block: 96px 145px;
    background: linear-gradient(180deg, white 0%, var(--bg2) 50%, white 100%);

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

    .u-inner {
      @media (width <= 768px) {
        padding-inline: calc((100 / 750) * 40 * 1vw);
      }

      & dl {
        display: table;
        inline-size: 901px;
        margin-block-start: 55px;
        margin-inline: auto;
        table-layout: fixed;
        border-collapse: collapse;

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

        .tr {
          display: table-row;

          @media (width <= 768px) {
            position: relative;
            display: block flex;
            flex-direction: column;
            gap: calc((100 / 750) * 17 * 1vw);
            padding-block-end: 10.1vw;

            &::before {
              position: absolute;
              inset-block-start: 1.7vw;
              inset-inline-start: 5.4vw;
              z-index: 2;
              display: block flow;
              inline-size: calc((100 / 750) * 31 * 1vw);
              block-size: calc((100 / 750) * 48 * 1vw);
              content: '';
              background-image: url('../img/_common/water-color.svg');
              background-repeat: no-repeat;
              background-position: center;
              background-size: contain;
            }

            &::after {
              position: absolute;
              inset-block-start: 0;
              inset-inline-start: 7.4vw;
              z-index: 1;
              display: block flow;
              inline-size: 1px;
              block-size: 100%;
              content: '';
              background-color: white;
            }
          }
        }

        @media (width <= 768px) {
          .tr:first-child::after {
            clip-path: inset(20% 0 0 0);
          }

          .tr:last-child::after {
            clip-path: inset(0 0 0 0);
          }
        }

        & :where(dt, dd) {
          display: table-cell;
          padding-block: 25px;
          padding-inline: 44px;
          margin-block: calc((1em - 1lh) / 2);
          vertical-align: middle;

          @media (width <= 768px) {
            padding-block: calc((100 / 750) * 0 * 1vw);
            padding-inline: calc((100 / 750) * 104 * 1vw) calc((100 / 750) * 20 * 1vw);
          }
        }

        & dt {
          position: relative;
          inline-size: 256.3px;
          font-family: var(--lalezar);
          font-size: 64px;
          font-weight: 400;
          line-height: 1;
          color: var(--secondary);

          @media (width <= 768px) {
            inline-size: 100%;
            padding-block: calc((100 / 750) * 0 * 1vw);
            padding-inline: calc((100 / 750) * 105 * 1vw) calc((100 / 750) * 20 * 1vw);
            font-size: calc((100 / 750) * 96 * 1vw);
          }

          @media (width > 768px) {
            &::before {
              position: absolute;
              inset-block-start: 44%;
              inset-inline-start: 0;
              z-index: 2;
              display: block flow;
              inline-size: 12px;
              block-size: 18px;
              content: '';
              background-image: url('../img/_common/water-color.svg');
              background-repeat: no-repeat;
              background-position: center;
              background-size: contain;
              translate: 0 -50%;
            }

            &::after {
              position: absolute;
              inset-block-start: 0;
              inset-inline-start: 6px;
              z-index: 1;
              display: block flow;
              inline-size: 1px;
              block-size: 100%;
              content: '';
              background-color: white;
            }
          }
        }

        @media (width > 768px) {
          .tr:first-child dt::after {
            clip-path: inset(50% 0 0 0);
          }

          .tr:last-child dt::after {
            clip-path: inset(0 0 0 0);
          }
        }
      }
    }
  }

  /* =====================
    Access
  ===================== */
  & section[data-url='access'] {
    padding-block: 60px 109px;
    overflow: hidden;
    background: white;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 95 * 1vw) 14.9vw;
    }

    /* ==== u-inner ==== */
    .u-inner {
      /* ==== map ==== */
      & iframe {
        inline-size: 100vw;
        min-block-size: 480px;
        margin-block: 86px 48px;
        margin-inline: calc(50% - 50vw);

        @media (width <= 768px) {
          min-block-size: calc((100 / 750) * 480 * 1vw);
          margin-block: 11.9vw 9vw;
        }
      }

      .anchor {
        display: block flex;
        align-items: center;
        justify-content: space-between;
        margin-block: calc((1em - 1lh) / 2);

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

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