/* ========================================
   Page FV
======================================== */

.page-fv {
  width: 100%;

  border-bottom: 1px solid var(--color-border);

  background-color: var(--color-bg);
}


/* ========================================
   Page FV Inner
======================================== */

.page-fv__inner {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  min-height: 600px;
}


/* ========================================
   Page FV Content
======================================== */

.page-fv__content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  min-width: 0;

  padding:
    70px
    70px
    70px
    max(
      90px,
      calc((100vw - var(--container-width)) / 2 + 70px)
    );
}


/* ========================================
   Page FV Title
======================================== */

.page-fv__title {
  margin: 0;

  color: var(--color-main);

  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 400;

  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}


/* ========================================
   Page FV English + Line
======================================== */

.page-fv__en-wrap {
  display: flex;
  align-items: center;

  gap: 18px;

  margin-top: 18px;
}

.page-fv__en {
  flex-shrink: 0;

  margin: 0;

  color: var(--color-text-sub);

  font-size: var(--font-size-xs);
  font-weight: 400;

  line-height: 1.6;
  letter-spacing: 0.22em;
}

.page-fv__line {
  position: relative;

  display: block;

  width: 64px;
  height: 1px;

  background-color: var(--color-border);
}

.page-fv__line::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 0;

  width: 10px;
  height: 2px;

  background-color: var(--color-main);

  transform: translateY(-50%);
}


/* ========================================
   Page FV Text
======================================== */

.page-fv__text {
  margin-top: 34px;

  color: var(--color-text);

  font-size: var(--font-size-sm);

  line-height: 2;
  letter-spacing: var(--letter-spacing-base);
}

.page-fv__text p {
  margin: 0;
}


/* ========================================
   Page FV Visual
======================================== */

.page-fv__visual {
  width: 100%;
  height: 100%;

  overflow: hidden;

  background-color: var(--color-bg-sub);
}

.page-fv__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}


/* ========================================
   Tablet
======================================== */

@media screen and (max-width: 1024px) {

  .page-fv__inner {
    min-height: 500px;
  }

  .page-fv__content {
    padding:
      60px
      50px
      60px
      60px;
  }

  .page-fv__title {
    font-size: 32px;
  }

  .page-fv__line {
    width: 54px;
  }

}


/* ========================================
   Smartphone
======================================== */

@media screen and (max-width: 768px) {

  .page-fv__inner {
    display: block;

    min-height: auto;
  }

  .page-fv__content {
    padding:
      54px
      var(--container-padding)
      48px;
  }

  .page-fv__title {
    font-size: 28px;
  }

  .page-fv__en-wrap {
    margin-top: 14px;
  }

  .page-fv__line {
    width: 48px;
  }

  .page-fv__text {
    margin-top: 28px;

    font-size: var(--font-size-sm);
  }

  .page-fv__visual {
    aspect-ratio: 16 / 10;
  }

  .page-fv__image {
    width: 100%;
    height: 100%;

    object-fit: cover;
  }

}