@charset "UTF-8";

@layer style {
  .aside {
    position: relative;
    padding-block: 52px 54px;
    color: white;
    background-image: url('../img/_common/aside/bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    @media (width <=768px) {
      padding-block: var(--nudge-5) var(--nudge-8);
    }

    /* ==== u-inner ==== */
    .u-inner {
      display: block grid;
      gap: 22px;
      justify-content: center;
      text-align: center;

      @media (width <=768px) {
        gap: 0;
      }

      /* ==== en ==== */
      [lang='en'] {
        font-size: 64px;
        font-weight: 400;

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

      p {
        margin-block-start: -10px;

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

      /* ==== tel ==== */
      .tel {
        display: block flex;
        gap: 90px;
        margin-block-start: 0;

        @media (width <=768px) {
          display: block flex;
          flex-direction: column;
          gap: var(--nudge-6);
          margin-block-start: var(--nudge-6);
        }

        .unit {
          color: var(--color-text-primary);
        }

        .tel-number {
          display: block flex;
          gap: 26px;
          align-items: center;
          block-size: fit-content;
          font-size: 40px;
          font-weight: 400;

          @media (width > 768px) {
            margin-block: calc((1em - 1lh) / 2);
          }

          @media (width <=768px) {
            gap: calc((100 / 390) * 16 * 1vw);
            padding-inline: calc((100 / 390) * 27 * 1vw);
            font-size: calc((100 / 390) * 28 * 1vw);
            background: color-mix(in srgb, white 10%, transparent);
          }

          &::before {
            display: block flow;
            inline-size: 30px;
            aspect-ratio: 1 / 1;
            content: '';
            background-color: currentcolor;
            mask-image: var(--icon-tel);
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: contain;
            translate: 6px -8px;

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

        .u-anchor {
          @media (width > 768px) {
            align-self: center;
            min-inline-size: 300px;
          }

          @media (width <=768px) {
            padding-block: 4.5vw;
            padding-inline: 10vw 22.7vw;
            margin-inline: auto;
            color: white;
            background: #ffffff3d;

            &::after {
              background-color: white;
            }
          }
        }

        .unit {
          display: block flex;
          gap: 9px;
          justify-content: flex-start;

          @media (width <=768px) {
            display: block flex;
            flex-direction: column;
            gap: calc((100 / 390) * 40 * 1vw);
            justify-content: center;
            margin-inline: auto;
          }

          .item {
            position: relative;
            display: block grid;
            justify-content: start;
            padding-block: 18px;
            padding-inline: 26px;
            background: white;

            @media (width <=768px) {
              gap: 0;
              padding-block: 3.3vw;
              padding-inline: 4vw;
            }

            p {
              inline-size: fit-content;
              padding-inline-start: 56px;
              font-size: 15px;
              font-weight: 500;
              text-align: left;
              translate: 0 2px;

              @media (width <=768px) {
                inline-size: 100%;
                padding-inline-start: 0;
                font-size: calc((100 / 390) * 15 * 1vw);
                text-align: center;
                translate: unset;
              }
            }

            @media (width <=768px) {
              a::after {
                position: absolute;
                inset: 0;
                z-index: 1;
                content: '';
              }
            }
          }
        }
      }
    }
  }
}