@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: 496px;
    padding-block: 76px 64px;

    @media (width <= 768px) {
      background-image: url('../img/_common/aside_bg_2x.png');
      min-block-size: calc((100 / 390) * 644 * 1vw);
      padding-block: calc((100 / 390) * 80 * 1vw) calc((100 / 390) * 72 * 1vw);
    }
    .u-inner {
      .description {
        text-align: center;
        color: #fff;
        margin-block-start: 27px;

        @media (width <= 768px) {
          margin-block-start: calc((100 / 390) * 22 * 1vw);
        }
      }
      .wrap {
        position: relative;
        display: block flex;
        justify-content: center;
        gap: 144px;
        margin-block-start: 46px;
        padding-block: 16px;

        @media (width <= 768px) {
          flex-direction: column;
          gap: calc((100 / 390) * 74 * 1vw);
          margin-block-start: calc((100 / 390) * 37 * 1vw);
          padding-block: 0;
        }

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 51%;
          transform: translateX(-50%);
          inline-size: 1px;
          block-size: 100%;
          background-color: #fff;
          pointer-events: none;
        }

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

        .unit {
          display: block grid;
          grid-template-rows: repeat(2, max-content);
          justify-items: center;
          gap: 16px;

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

          .btn-title {
            position: relative;
            font-size: 18px;
            font-weight: 500;
            color: #fff;

            @media (width <= 768px) {
              font-size: calc((100 / 390) * 18 * 1vw);
              gap: calc((100 / 390) * 8 * 1vw);
            }
          }
          &[data-id='tel'] {
            .u-hover {
              display: block flex;
              align-items: center;
              gap: 16px;

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

              @media (width <= 768px) {
                &::before {
                  inline-size: calc((100 / 390) * 30 * 1vw);
                  block-size: calc((100 / 390) * 30 * 1vw);
                }
              }

              .tel-no {
                font-family: var(--title);
                font-size: 40px;
                font-weight: 500;
                line-height: 1.5;
                color: #fff;

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

          &[data-id='mail'] {
            @media (width <= 768px) {
              gap: calc((100 / 390) * 16 * 1vw);
            }
          }
        }
      }
    }
  }
}