@charset "UTF-8";

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

    @media only screen and (width <= 768px) {
      padding-block: calc((100 / 390) * 80 * 1vw);
      background-image: url('../img/_common/contact_bg_2x.png');
      inline-size: 100%;
      min-block-size: calc((100 / 390) * 657 * 1vw);
    }

    .u-inner {
      .description {
        text-align: center;
        margin-block-start: 50px;

        @media only screen and (width <= 768px) {
          margin-block-start: calc((100 / 390) * 41 * 1vw);
          line-height: 1.5;
        }
      }
      .list {
        margin-block-start: 62px;
        display: block flex;
        align-items: flex-start;
        justify-content: center;
        gap: 104px;

        @media only screen and (width <= 768px) {
          flex-direction: column;
          align-items: center;
          margin-block-start: calc((100 / 390) * 56 * 1vw);
          gap: calc((100 / 390) * 31 * 1vw);
        }

        .item {
          .title {
            font-size: 20px;
            font-weight: 500;
            color: var(--primary);
            display: block flex;
            gap: 16px;
            align-items: center;
            justify-content: center;

            @media only screen and (width <= 768px) {
              font-size: calc((100 / 390) * 16 * 1vw);
              gap: calc((100 / 390) * 9 * 1vw);
            }

            &::before {
              content: '';
              display: block flow;
              background-repeat: no-repeat;
              background-size: contain;
              background-position: center;
            }
          }

          &[data-id='tel'] {
            .title {
              &::before {
                background-image: url('../img/_common/icon_tel.svg');
                inline-size: 19px;
                block-size: 19px;
              }

              @media only screen and (width <= 768px) {
                &::before {
                  inline-size: calc((100 / 390) * 14 * 1vw);
                  block-size: calc((100 / 390) * 14 * 1vw);
                }
              }
            }
            .text {
              opacity: 0.96;
              font-family: var(--title);
              font-size: 40px;
              color: var(--primary);
              margin-block-start: 5px;

              @media only screen and (width <= 768px) {
                font-size: calc((100 / 390) * 32 * 1vw);
                margin-block-start: calc((100 / 390) * 5 * 1vw);
              }
            }
          }
          &[data-id='form'] {
            .title {
              &::before {
                mask-repeat: no-repeat;
                mask-size: contain;
                mask-position: center;
                mask-image: var(--icon-mail);
                background-color: var(--primary);
                inline-size: 25px;
                aspect-ratio: 21/14;
              }

              @media only screen and (width <= 768px) {
                &::before {
                  inline-size: calc((100 / 390) * 21 * 1vw);
                }
              }
            }
            .u-anchor {
              margin-block-start: 13px;

              @media only screen and (width <= 768px) {
                margin-block-start: calc((100 / 390) * 14 * 1vw);
              }
            }
          }
        }
      }
    }

    .m_wrap {
      inline-size: 100%;
      position: absolute;
      display: block flex;
      align-items: center;
      bottom: 77px;
      left: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 2;

      @media only screen and (width <= 768px) {
        bottom: calc((100 / 390) * 31 * 1vw);
      }

      .marquee {
        display: block flow;
        flex-shrink: 0;
        animation: marquee1 100s linear infinite;

        &::before {
          content: '';
          display: block flow;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../img/_common/aside_marquee.png');
          inline-size: 5322px;
          block-size: 144px;
        }

        @media only screen and (width <= 768px) {
          &::before {
            background-image: url('../img/_common/aside_marquee_2x.png');
            inline-size: calc((100 / 390) * 2661 * 1vw);
            block-size: calc((100 / 390) * 62.5 * 1vw);
          }
        }
      }
    }
  }
}

/* =====================
  Recruit_aside
===================== */
@layer style {
  .recruit-aside {
    position: relative;
    padding-block: 104px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/recruit/_common/contact_bg.png');
    inline-size: 100%;
    min-block-size: 544px;
    border-radius: 80px 80px 0 0;

    @media only screen and (width <= 768px) {
      padding-block: calc((100 / 390) * 66 * 1vw);
      background-image: url('../img/recruit/_common/contact_bg_2x.png');
      inline-size: 100%;
      min-block-size: calc((100 / 390) * 456 * 1vw);
      border-radius: calc((100 / 390) * 60 * 1vw) calc((100 / 390) * 60 * 1vw) 0 0;
    }

    .u-inner {
      .u-hgroup {
        @media only screen and (width <= 768px) {
          & span[lang='en'] {
            font-size: calc((100 / 390) * 48 * 1vw);
          }
        }
      }
      .description {
        font-size: 20px;
        font-weight: 600;
        color: #fff;
        text-align: center;
        margin-block-start: 1px;

        @media only screen and (width <= 768px) {
          font-size: calc((100 / 390) * 16 * 1vw);
          margin-block-start: 0;
        }
      }
      .link-list {
        margin-block-start: 31px;
        display: block flex;
        align-items: flex-start;
        justify-content: center;
        gap: 60px;

        @media only screen and (width <= 768px) {
          flex-direction: column;
          align-items: center;
          margin-block-start: calc((100 / 390) * 31 * 1vw);
          gap: calc((100 / 390) * 16 * 1vw);
        }

        .item {
          .anchor {
            position: relative;
            inline-size: 530px;
            padding-inline: 60px;
            padding-block: 51px 46px;
            display: block flow;
            border-radius: 20px;
            background: #fff;

            @media only screen and (width <= 768px) {
              inline-size: calc((100 / 390) * 326 * 1vw);
              padding-inline: calc((100 / 390) * 32 * 1vw);
              padding-block: calc((100 / 390) * 24 * 1vw) calc((100 / 390) * 19 * 1vw);
              border-radius: calc((100 / 390) * 20 * 1vw);
            }

            &::before {
              content: '';
              position: absolute;
              inset: 0;
              background: var(--gradation_r);
              border-radius: 20px;
              opacity: 1;
              transition: all 0.3s ease-in-out;
            }

            @media only screen and (width <= 768px) {
              &::before {
                border-radius: calc((100 / 390) * 20 * 1vw);
              }
            }
            &::after {
              content: '';
              position: absolute;
              inset: 2px;
              background: #fff;
              border-radius: 20px;
              opacity: 1;
              transition: all 0.3s ease-in-out;
            }

            @media only screen and (width <= 768px) {
              &::after {
                inset: calc((100 / 390) * 2 * 1vw);
                border-radius: calc((100 / 390) * 20 * 1vw);
              }
            }

            .u-text-gradation[lang='en'] {
              display: block flex;
              justify-content: space-between;
              position: relative;
              font-family: var(--title);
              font-size: 40px;
              line-height: 1.1;
              text-transform: uppercase;
              z-index: 5;

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

              &::after {
                content: '';
                display: block flow;
                inline-size: 20px;
                aspect-ratio: 1 / 1;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
                background-image: url('../img/_common/icon_arrow.svg');
                flex-shrink: 0;
                transition: all 0.3s ease-in-out;
              }

              @media only screen and (width <= 768px) {
                &::after {
                  inline-size: calc((100 / 390) * 16 * 1vw);
                }
              }
            }
            .title {
              position: relative;
              font-weight: 500;
              margin-block-start: 10px;
              z-index: 5;

              @media only screen and (width <= 768px) {
                margin-block-start: calc((100 / 390) * 2 * 1vw);
              }
            }
          }

          @media (any-hover: hover) {
            &:hover {
              .anchor {
                &::before {
                  inset: 2px;
                }
                &::after {
                  opacity: 0;
                }

                .u-text-gradation {
                  color: #fff;
                  background: unset;
                  background-clip: unset;
                  -webkit-text-fill-color: unset;

                  &[lang='en'] {
                    &::after {
                      filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}