@charset "UTF-8";

.page-hero {
  position: relative;
  width: 100%;
  height: calc(100vh - 80px);
  height: calc(100dvh - 80px);
  min-height: 520px;
  padding: 0 80px 80px; 
  box-sizing: border-box;
  background-color: #ffffff;
  display: flex;

  @media (max-width: 1024px) {
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 420px;
    padding: 0 40px 40px;
  }

  @media (max-width: 768px) {
    height: calc(100vh - 80px);
    height: calc(100dvh - 80px);
    aspect-ratio: auto;
    min-height: 500px;
    padding: 0 20px 60px; 
  }
}

.page-hero__frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
}


.page-hero__media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.page-hero__placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--page-hero-theme, #CBD5DF);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-hero__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.page-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


.page-hero__title-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.12); 
}

.page-hero__title {
  font-family: var(--font-en, 'Bentham', serif);
  font-size: clamp(2.625rem, 2.303rem + 1.38vw, 3.438rem);
  font-weight: 400;
  color: #FFF;
  text-align: center;

  @media (max-width: 768px) {
    font-size: clamp(1.8rem, 6.5vw, 2.6rem);
  }
}


.page-hero__side-deco {
  position: absolute;
  right: -40px; 
  bottom: -12px; 
  transform: rotate(90deg);
  transform-origin: 100% 50%; 
  font-family: var(--font-en, 'Bentham', serif);
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  color: #8C99A4;
  white-space: nowrap;
  pointer-events: none;

  @media (max-width: 1024px) {
    display: none; 
  }
}



.subpage-main {
  background-color: #ffffff;
  min-height: 100vh;
}


.subpage-inner {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 clamp(20px, calc(20px + 280 * var(--fluid)), 300px);
  box-sizing: border-box;
}