@use '../global' as *;

.p-pages-hero {
  color: #fff;
  padding: fz(60) 0 fz(96);

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

  // 背景写真の上に薄い黒を重ね、パンくず・見出しの白文字の可読性を確保する
  // （--pt02 は背景写真を持たない白背景パターンのため除外）
  &.u-bg-cover:not(.--pt02) {
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.25);
      pointer-events: none;
      z-index: 1;
    }

    .u-bg-cover__bg {
      z-index: 0;
    }
  }

  &.--padding-l {
    padding: rem(48) 0 rem(290);

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

    .p-pages-hero__inner {
      min-height: auto;
    }
  }

  &.--height-low {
    padding: fz(60) 0 fz(35);

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

    .p-pages-hero__inner {
      min-height: rem(200);

      @include mq-down(sm) {
        min-height: rem(110);
      }
    }
  }

  &.--pt02 {
    background-color: #fff;
    padding: 0;
    margin-bottom: rem(63);
    color: inherit;

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

    .p-pages-hero__inner {
      min-height: auto;
    }

    .p-pages-hero__info-ttl {
      color: $key_blue;
    }

    .p-pages-hero__info-data {
      color: $key_black;
    }

    .p-pages-hero__nav {
      padding: rem(48) 0 rem(36);

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

    .p-pages-hero__nav-item {
      &::after {
        border-color: $key_black;
      }
    }
  }

  &.--bg-gray {
    background-color: #f6f6f6;
  }

  &__inner {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    min-height: fz(496);
    z-index: 2;

    @include mq-down(sm) {
      min-height: fz(320);
    }
  }

  &__nav {
    display: flex;

    &-item {
      font-size: fz(13);
      position: relative;
      font-weight: 500;

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

      // 末尾はカレントページ。href がトップのままなので遷移とホバーを無効化する
      &:last-of-type {
        .p-pages-hero__nav-link {
          pointer-events: none;
          cursor: default;
        }
      }

      &:not(:last-of-type) {
        margin-right: fz(20);
        padding-right: fz(20);

        &::after {
          content: '';
          @include trans_y;
          right: 0;
          width: fz(7);
          height: fz(7);
          border-right: fz(2) solid #fff;
          border-bottom: fz(2) solid #fff;
          transform: translateY(-50%) rotate(-45deg);
        }
      }
    }
  }

  &__info {
    &-ttl {
      font-size: fz(60);
      background: none;

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

        &.--modail-md {
          font-size: rem(34);
        }
      }
    }

    &-data {
      font-size: fz(16);
      font-weight: 500;
    }
  }

  &__info-center {
    display: flex;
    align-items: center;
    flex-flow: column;
    color: $key_blue;
    text-align: center;
    margin-top: rem(163);

    @include mq-down(sm) {
      margin-top: rem(80);
    }

    &-ttl {
      background-color: #fff;
      line-height: 1.25;
      margin-bottom: rem(29);
      font-size: rem(60);
      padding: 0 rem(14);

      @include mq-down(sm) {
        font-size: rem(30);
        margin-bottom: rem(15);
      }
    }

    &-texts {
    }

    &-desc {
      padding: 0 rem(10);
      display: inline;
      background-color: #fff;
      box-decoration-break: clone;
      line-height: 1.7;
      font-weight: 500;
      font-size: rem(20);

      @include mq-down(sm) {
        font-size: rem(15);
      }
    }

    &.--bg-blue {
      .p-pages-hero__info-center-ttl,
      .p-pages-hero__info-center-desc {
        background-color: $key_blue;
        color: #fff;
      }
    }
  }

  &__btns {
    display: flex;
    justify-content: center;
    gap: rem(27);
    margin-top: rem(35);
    width: 100%;
    @include mq-down(sm) {
      gap: rem(12);
      justify-content: space-between;
    }
    &-item {
      @include mq-down(sm) {
        flex: 1 1 auto;
      }
    }

    &-link {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #0f9aaf;
      border-radius: rem(9999);
      color: #fff;
      gap: rem(8);
      padding: rem(16) rem(30);
      font-size: rem(20);
      @include mq-down(sm) {
        font-size: rem(16);
        padding: rem(15) rem(17);
      }
    }

    &-text {
      flex: 1 1 auto;
    }

    &-icon {
      flex: 0 0 rem(23);
      @include mq-down(sm) {
        flex-basis: rem(19);
      }
    }
  }

  &__btm-grad {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: rem(122);
    left: 0;
    bottom: 0;
    background: transparent linear-gradient(180deg, #ffffff00 0%, #ffffff 100%) 0% 0% no-repeat padding-box;
  }
}