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

/* ------------------------------
　　ページタイトル
------------------------------ */
.page-title-wrapper {
  position: relative;
  display: table;
  width: 100%;
  height: global.$page-title-height;
  margin: 0 0 global.$page-title-margin-bottom 0;
  color: global.$color-text;
  background: global.$color-gray20;
  background-size: cover;

  &[style] {
    height: global.$page-title-height-image;
    color: global.$color-text-inverse;
    text-align: center;

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

    .page-title-en {
      color: global.$color-text-inverse;
    }
  }
}

.page-title-filter {
  position: absolute;
  inset: 0;
  display: none;
  background: rgb(0 0 0 / 50%);
}

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

.page-title {
  margin: 0 0 0.25rem;
  font-weight: bold;
  font-size: map.get(global.$font-scales, heading-ss);
  line-height: global.$line-height-sm;
}

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

@media (min-width: acms.$breakpoint-md-min) {
  .page-title-wrapper {
    height: global.$page-title-height-md;
    margin: 0 0 global.$page-title-margin-bottom-md 0;

    &[style] {
      height: global.$page-title-height-image-md;
    }
  }

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

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