@use '../global' as *;

.l-footer {
  background: rgb(15, 85, 175);
  background: linear-gradient(159deg, rgba(15, 85, 175, 1) 0%, rgba(5, 153, 191, 1) 100%);
  color: #fff;
  position: relative;
  padding: fz(74) 0;

  &__deco {
    position: absolute;

    &.--left01 {
      bottom: 0;
      left: 0;
      width: fz(80);

      @include mq-down(sm) {
        width: fz(60);
      }
    }

    &.--right01 {
      bottom: 0;
      right: 0;
      width: fz(182);

      @include mq-down(sm) {
        width: fz(50);
        bottom: fz(145);
      }
    }
  }

  &__illust {
    position: absolute;

    &.--illust01 {
      width: fz(50);
      left: fz(112);
      top: fz(146);

      @include mq-down(lg) {
        display: none;
      }

      @include mq-down(sm) {
        display: block;
        top: auto;
        bottom: fz(20);
        width: fz(10);
        left: fz(20);
      }
    }

    &.--illust02 {
      width: fz(50);
      right: fz(156);
      bottom: fz(85);

      @include mq-down(sm) {
        bottom: auto;
        right: fz(27);
        width: fz(25);
      }
    }
  }

  &__inner {
    @include mq-down(sm) {
      padding: 0 5%;
    }
  }

  &__col {
    @include mq-up(sm) {
      display: flex;
      justify-content: space-between;
    }
  }

  &__side {
    flex: 0 0 auto;

    @include mq-up(sm) {
      margin-right: fz(115);
      width: 50%;
    }

    @include mq-down(sm) {
    }
  }

  &__logo {
    width: fz(266);
    margin-bottom: fz(49);
  }

  &__info {
    margin-bottom: fz(23);

    @include mq-down(sm) {
      margin-bottom: fz(7);
    }

    &-name {
      font-size: fz(20);
      margin-bottom: fz(5);
    }

    &-data {
      font-size: fz(15);
      //font-weight: 300;

      @include mq-down(sm) {
        font-size: fz(13);
      }
    }
  }

  &__sns {
    display: flex;
    align-items: center;
    margin-bottom: rem(45);

    @include mq-down(sm) {
      margin-bottom: fz(37);
    }

    &-item {
      &:not(:last-of-type) {
        margin-right: fz(25.6);
      }
    }
  }

  &__guide {
    display: flex;
    flex: 1 1 auto;

    @include mq-down(sm) {
      margin-bottom: fz(38);
    }
  }

  &__nav {
    margin-right: fz(46);

    @include mq-down(sm) {
      display: none;
    }

    &-item {
      &:not(:last-of-type) {
        margin-bottom: fz(16);
      }
    }

    &-link {
      display: flex;
      align-items: center;
      //font-weight: 300;
      font-size: fz(18);
      line-height: 1;
    }

    &-arw {
      fill: #fff;
      width: fz(10);
      height: fz(8);
      margin-right: fz(5);
    }

    &-text {
    }
  }

  &__sub {
    &-item {
      //font-weight: 300;
      font-size: fz(14);

      &:not(:last-of-type) {
        margin-bottom: fz(10);
      }
    }

    &-link {
      text-decoration: underline;
    }
  }

  &__copy {
    font-size: fz(13);
    //font-weight: 300;

    @include mq-down(sm) {
      font-size: fz(12);
    }
  }
}