@charset "UTF-8";

/* =====================
  aside
===================== */
@layer style {
  .aside {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/_common/aside_bg.png');
    inline-size: 100%;
    min-block-size: 316px;
    padding-block: 95px;

    @media (width <= 768px) {
      background-image: url('../img/_common/aside_bg_2x.png');
      min-block-size: calc((100 / 390) * 576 * 1vw);
      padding-block: calc((100 / 390) * 80 * 1vw) calc((100 / 390) * 64 * 1vw);
    }
    .u-inner {
      padding-inline: 40px;
      display: block grid;
      grid-template-columns: 464px auto;
      align-items: center;
      justify-content: space-between;
      row-gap: 31px;

      @media (width <= 768px) {
        padding-inline: calc((100 / 390) * 16 * 1vw);
        grid-template-columns: 1fr;
        gap: 0;
      }

      .u-h2-title {
        grid-area: 1/1/2/2;

        @media (width <= 768px) {
          justify-items: center;
          margin-inline: auto;

          & span[lang='en'] {
            &::after {
              content: '';
              display: block;
              inline-size: calc((100 / 390) * 6 * 1vw);
              aspect-ratio: 1/1;
              border-radius: calc((100 / 390) * 2 * 1vw);
              background-color: #fff;
            }
          }
        }
      }
      .description {
        grid-area: 2/1/3/2;
        color: #fff;

        @media (width <= 768px) {
          grid-area: 2/1/3/2;
          text-align: center;
          margin-block-start: calc((100 / 390) * 32 * 1vw);
        }
      }

      .wrap {
        grid-area: 1/2/3/3;
        position: relative;
        display: block grid;
        grid-template-columns: 268px auto;
        justify-items: center;
        align-content: center;
        gap: 64px;
        margin-block-end: 8px;

        @media (width <= 768px) {
          grid-area: 3/1/4/2;
          min-block-size: calc((100 / 390) * 208 * 1vw);
          grid-template-columns: 1fr;
          justify-items: center;
          gap: calc((100 / 390) * 54 * 1vw);
          align-content: start;
          margin-block-start: calc((100 / 390) * 62 * 1vw);
        }

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 47%;
          transform: translate(-50%, -50%);
          inline-size: 1px;
          block-size: 140px;
          background-color: #fff;
        }

        @media (width <= 768px) {
          &::before {
            inline-size: calc((100 / 390) * 140 * 1vw);
            block-size: 1px;
            left: 50%;
            top: 52%;
          }
        }

        .unit {
          display: block grid;
          grid-template-rows: repeat(2, auto);
          row-gap: 12px;

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

          .btn-title {
            position: relative;
            text-align: center;
            color: #fff;
          }

          &[data-id='tel'] {
            .tel-no {
              position: relative;
              font-family: var(--serif);
              font-size: 32px;
              color: #fff;
              display: block flex;
              align-items: center;
              gap: 20px;

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

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

              @media (width <= 768px) {
                &::before {
                  inline-size: calc((100 / 390) * 24 * 1vw);
                }
              }
            }
          }
          &[data-id='mail'] {
            .u-anchor {
              @media (width <= 768px) {
                margin-block-start: calc((100 / 390) * 10 * 1vw);

                & img {
                  width: calc((100 / 390) * 27 * 1vw);
                }
              }
            }
          }
        }
      }
    }
  }
}