@charset "UTF-8";

@layer style {
  .aside {
    position: relative;
    display: block flex;
    min-block-size: 360px;
    overflow: clip;
    background-color: #fff;
    isolation: isolate;

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

    &::before,
    &::after {
      position: absolute;
      display: block;
      block-size: 100%;
      pointer-events: none;
      content: '';
      mix-blend-mode: multiply;
    }

    &::before {
      inset: 0;
      inline-size: 100%;
      background-image: url('../img/_common/aside.webp');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      opacity: 0.3;

      @media (width <=768px) {
        background-image: url('../img/_common/aside_sp.webp');
      }
    }

    &::after {
      inset-block: 0;
      inset-inline-end: 0;
      inline-size: 50%;
      background: #507f4d;
      mix-blend-mode: multiply;

      @media (width <=768px) {
        inset-block-start: 47.5%;
        inset-inline: 0;
        inline-size: 100%;
      }
    }

    /* ==== section ==== */
    section {
      position: relative;
      z-index: 2;
      display: block grid;
      inline-size: 50%;

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

    /* ==== contact ==== */
    .contact {
      display: block grid;
      gap: 30px;
      align-self: flex-start;
      padding-block: 76px;

      @media (width <=768px) {
        gap: 7.3vw;
        padding-block: 12.4vw 13vw;
      }
    }

    /* ==== tel ==== */
    .tel {
      display: block grid;
      gap: 10px;
      align-items: flex-start;
      align-self: flex-start;
      padding-block: 70px;
      color: white;
      text-align: center;

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

      .catch {
        font-family: var(--yumin);
        font-size: 30px;
        font-weight: 400;

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

      .body {
        font-size: 14px;

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

      .number {
        display: block flex;
        gap: 16px;
        justify-content: center;
        margin-block: 2px calc((1em - 1lh) / 2);
        margin-inline: auto;
        font-family: var(--title);
        font-size: 34px;
        font-weight: 300;
        letter-spacing: 0.9px;
        translate: -1px 0;

        @media (width <=768px) {
          gap: 6.9vw;
          margin-block: 0.8vw calc((1em - 1lh) / 2);
          font-size: calc((100 / 390) * 32 * 1vw);
          font-weight: 400;
          letter-spacing: 0.8vw;
          translate: 0 0;
        }

        &::before {
          inline-size: 32px;
          aspect-ratio: 1 / 1;
          content: '';
          background-image: url('../img/_common/icon/tel.svg');
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;

          @media (width <=768px) {
            font-size: calc((100 / 390) * 32 * 1vw);
            translate: 3vw 0.4vw;
          }
        }
      }

      .text {
        margin-block-start: 4px;
        font-size: 14px;

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