@use '../global' as *;

.p-pages-col02 {
  padding: fz(99) 0 fz(150);
  position: relative;

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

  &::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: rem(55);
    width: rem(133);
    height: rem(520);
    background: url(../images/common/pags_side_deco.png) no-repeat 50% 100%;
    background-size: 100% auto;

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

  &::after {
    content: '';
    width: 100%;
    height: rem(114.29);
    @include trans_x;
    bottom: rem(-110);
    z-index: 5;
    background: url(../images/common/main_contents_deco_btm.png) no-repeat 50% 100%;
    background-size: 100% auto;

    @include mq-down(lg) {
      bottom: rem(-78);
    }

    @include mq-down(sm) {
      bottom: rem(-22);
    }
  }

  &__col {
    display: flex;
    @include mq-up(sm) {
      justify-content: space-between;
      align-items: flex-start;
      column-gap: fz(152);
      column-gap: fz(80);
    }

    @include mq-down(sm) {
      flex-direction: column;
      //gap: rem(30);
    }
  }

  &__side {
    @include mq-down(sm) {
      display: contents;
    }
  }
}

@include mq-down(sm) {
  .p-sidebar__nav-group {
    order: 1;
    margin-bottom: rem(35);
  }
  .p-page-main {
    order: 2;
  }
  .p-sidebar__banners {
    order: 3;
  }
}

@include mq-down(sm) {
  .p-single {
    .p-page-main {
      order: 1;
    }
    .p-sidebar__nav-group {
      order: 3;
    }
  }
}

.p-pages-column-one {
  position: relative;
  padding-bottom: rem(148);

  @include mq-down(sm) {
    padding-bottom: rem(75);
  }

  &::after {
    content: '';
    width: 100%;
    height: rem(114.29);
    @include trans_x;
    bottom: rem(-110);
    bottom: -5rem;
    z-index: 4;
    background: url(../images/common/main_contents_deco_btm.png) no-repeat 50% 100%;
    background-size: 100% auto;

    @include mq-down(lg) {
      bottom: rem(-78);
    }

    @include mq-down(sm) {
      bottom: rem(-22);
    }
  }
}

.p-sidebar {
  @include mq-up(sm) {
    flex: 0 0 fz(208);

    position: sticky;
    left: 0;
    top: fz(70);
  }

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

  &__gr {
    padding: fz(11) 0;
    border-bottom: 1px dashed #cbcbcb;
  }

  &__ttl,
  &__nav {
    padding-left: fz(15);
  }

  &__ttl {
    font-size: fz(16);
    color: #1d2a3a;
    position: relative;

    &::before {
      content: '';
      width: fz(9);
      height: fz(9);
      border-radius: 50%;
      background-color: $key_blue;
      @include trans_y;
      left: 0;
    }
  }

  &__nav {
    margin-top: fz(5);

    &-item {
      font-size: fz(14);
      color: #1d2a3a;

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

    &-link {
    }
  }

  &__banners {
    margin-top: fz(51);
    @include mq-down(sm) {
      margin-top: rem(35);
    }

    &-item {
      border-radius: fz(6);
      overflow: hidden;
      box-shadow: 0 fz(3) fz(10) rgba($color: #000000, $alpha: 0.15);
    }
  }

  &__newes {
    &-post {
      background-image: repeating-linear-gradient(90deg, #cbcbcb, #cbcbcb 2px, transparent 2px, transparent 6px);
      background-position: left bottom;
      background-repeat: repeat-x;
      background-size: 100% 1px;
    }

    &-link {
      display: block;
      padding: rem(16) 0;
    }

    &-ttl {
      font-size: rem(14);
      font-weight: 500;
      line-height: 1.3;
    }
  }
}

.p-page-main {
  flex: 1 1 auto;

  &__block {
    &:not(:last-child) {
      margin-bottom: fz(100);

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

    &-ttl {
      margin-bottom: fz(25);
    }

    &-desc {
      font-size: fz(20);

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

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

    &-flow {
      margin-top: fz(35);
    }
  }

  &__btm-bnr {
    border-radius: fz(13);
    overflow: hidden;

    &_link {
      display: flex;
      flex-flow: column;
      justify-content: center;
      height: fz(189);
      color: #fff;
      padding: fz(20) fz(120);

      @include mq-down(sm) {
        padding: fz(15) fz(25);
        height: fz(155);
      }
    }

    &_cont {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    &_text {
      font-size: fz(28);
      font-weight: 600;
      letter-spacing: 0.1em;

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

    .cricle-arw {
      margin-left: fz(17);
    }
  }
}