@use "sass:map";
@use "global/acms-common" as acms;
@use "global/common" as global;

/* ------------------------------
　　ページタイトル
------------------------------ */
.page-title-wrapper {
  position: relative;
  display: table;
  width: 100%;
  height: 10rem;
  color: var(--color-text);
  background: var(--color-page-title-bg);
  background-position: center;
  background-size: cover;

  &[style] {
    color: var(--color-white);
    background-color: var(--color-white);

    .page-title-filter {
      display: block;
    }

    .page-title-en {
      color: var(--color-white);
    }
  }
}

.page-title-inner {
  position: relative;
  display: table-cell;
  padding: 1rem 0;
  vertical-align: middle;
}

.page-title-filter {
  position: absolute;
  inset: 0;
  display: none;
  background: var(--page-title-filter);
}

.page-title {
  margin: 0;
  font-size: map.get(global.$font-scales, heading-s);
  font-weight: bold;
  line-height: var(--line-height-sm);
  word-break: break-all;
}

.page-title-text-wrap {
  width: fit-content;

  &.left {
    margin-right: auto;
    text-align: left;
  }

  &.center {
    margin: 0 auto;
    text-align: center;
  }

  &.right {
    margin-left: auto;
    text-align: right;
  }
}

.page-title-en {
  margin: 0;
  font-size: map.get(global.$font-scales, body-s);
  font-weight: bold;
  line-height: var(--line-height-sm);
  color: var(--color-text-2nd);

  &::first-letter {
    text-transform: uppercase;
  }
}



@include acms.media-breakpoint-up(md) {
  .page-title-wrapper {
    height: 17.5rem;
  }

  .page-title {
    font-size: map.get(global.$font-scales, heading-m);
  }

  .page-title-en {
    font-size: map.get(global.$font-scales, heading-ss);
  }
}

/* ------------------------------
　　ページサブタイトル
------------------------------ */

.page-sub-title {
  margin: 0 0 2rem;
  font-size: map.get(global.$font-scales, heading-s);
  line-height: var(--line-height-base);
  color: var(--color-text);

  a {
    color: currentcolor;
    text-decoration: none;
  }

  @include acms.media-breakpoint-up(md) {
    font-size: map.get(global.$font-scales, heading-m);
  }
}
