@use '../global' as *;

.announce {
  padding: fz(147) 0;
  background-color: #f6f6f6;

  @include mq-down(sm) {
    padding: fz(64) 0;
  }

  &.announce-pages-pt01 {
    padding: rem(237) 0 rem(213);
    position: relative;

    @include mq-down(sm) {
      padding: rem(45) 0;
    }
  }

  &__deco-left {
    position: absolute;
    left: 0;
    top: rem(81);
    width: rem(141);

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

  &__deco-right {
    position: absolute;
    right: 0;
    top: rem(288);
    width: rem(69);

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

  &__nav {
    margin-bottom: fz(60);

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

    &-item {
      @include mq-up(sm) {
        width: percent(448, 1408);
      }

      @include mq-down(sm) {
        &:not(:last-of-type) {
          margin-bottom: fz(28);
        }
      }
    }

    &-link {
    }

    &-thumb {
      //height: fz(253);
      box-shadow: 0 fz(3) fz(10) rgba($color: #000000, $alpha: 0.15);
      overflow: hidden;
      border-radius: fz(12);
      margin-bottom: fz(25);

      aspect-ratio: 16 / 9;

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

    &-main {
    }

    &-ttl {
      display: flex;
      align-items: center;

      .title {
        font-size: fz(25);
        font-weight: 900;
        //padding-right: 2em;
        line-height: 1;
        //text-align: center;
        @include mq-down(sm) {
          font-size: fz(20);
        }
      }

      .cricle-arw {
        background-color: $key_blue;
        margin-left: fz(13);
        width: fz(26);
        height: fz(26);

        aspect-ratio: 1/1;
        .cricle-arw__arw {
          width: fz(7);
          height: fz(10);
        }

        &.--red {
          background-color: #ff0000;

          .cricle-arw__arw {
            width: fz(10);
            height: fz(8);
          }
        }
      }
    }
  }

  &__faq {
    background-color: #fff;
    border-radius: fz(6);
    box-shadow: 0 fz(3) fz(10) rgba($color: #000000, $alpha: 0.15);

    padding: fz(35) fz(60);
    padding-right: fz(33);

    @include mq-up(sm) {
      display: flex;
      align-items: center;
    }

    @include mq-down(sm) {
      padding: fz(20) fz(26);
      padding-right: fz(14);
    }

    &-heading {
      font-weight: 900;
      color: $key_blue;
      flex: 0 0 auto;
      font-size: fz(50);
      line-height: 1;

      @include mq-up(sm) {
        margin-right: fz(75);
      }

      @include mq-down(sm) {
        font-size: fz(28);
        margin-bottom: fz(3);
      }
    }

    &-main {
      flex: 1 1 auto;
    }

    &-item {
    }

    &-link {
      display: flex;
      justify-content: space-between;
      align-items: center;

      @include mq-down(sm) {
        align-items: flex-start;
      }
    }

    &-ttl {
      flex: 1 1 auto;
      font-size: fz(17);

      @include mq-down(sm) {
        font-size: fz(15);
        line-height: 1.55;
      }
    }

    &-arw {
      background-color: $key_blue;
      flex: 0 0 auto;
      margin-left: fz(24);

      @include mq-down(sm) {
        margin-top: fz(-8);
      }
    }
  }
}