/* -----------------------------------------------------------
©PFU Limited
----------------------------------------------------------- */
:root {
  --font-color-white: #ffffff;
  --font-color-black: #000000;
  --font-color-red: #b11d1d;

  --background-color-black: #000000;
  --background-color-white: #ffffff;
  --background-color-red: #b11d1d;
  --background-color-gray: #d0d0d0;

  --button-color-red: #b11d1d;

  --accent-color-black: #000000;
  --accent-color-gray: #343434;
  --accent-color-white: #ffffff;
}

h3 {
  &.en {
    font-size: 3.2rem;

    @media (min-width: 769px) {
      font-size: 4.8rem;
    }
  }
}

h4 {
  font-weight: normal;
  font-size: 2.4rem;
  text-align: center;

  @media (min-width: 769px) {
    font-size: 3.2rem;
  }
}

p {
  line-height: 1.5;

  & + & {
    margin-top: 0;
  }
}

.overviewTxt {
  line-height: 1.5;
}

.section {
  overflow-x: hidden;
}

.sectionInner {
  .section.-maxWidth1280 & {
    max-width: 1280px;
  }
}

.contentWrapper {
  background-image: url(../images/bg_jagged_sp.webp);
  background-position: center top;

  @media (min-width: 769px) {
    background-image: url(../images/bg_jagged.webp);
  }
}

.media {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;

  @media (min-width: 769px) {
    flex-direction: row;
    justify-content: flex-end;
  }
  @media (min-width: 1024px) {
    gap: 80px;
  }

  &.-reverse {
    @media (min-width: 769px) {
      flex-direction: row-reverse;
    }
  }

  &.-sales {
  }

  h3 + & {
    margin-top: 24px;

    @media (min-width: 769px) {
      margin-top: 40px;
    }
  }
}

.media_txtArea {
  position: relative;
  z-index: 1;

  @media (min-width: 769px) {
    flex: 1;
    max-width: 560px;
  }
}

.media_txtWrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;

  @media (min-width: 769px) {
    gap: 32px;
  }
}

.media_heading {
  font-weight: bold;
  font-size: 1.8rem;

  @media (min-width: 769px) {
    font-size: 2.8rem;
  }
}

.media_txt {
  margin-top: 0;
  font-size: 1.6rem;

  @media (min-width: 769px) {
    font-size: 2rem;
  }
}

.media_imgArea {
  @media (min-width: 769px) {
    flex: 1;
    max-width: 600px;
  }

  .media.-market & {
    aspect-ratio: 600 / 461;

    @media (min-width: 769px) {
      aspect-ratio: initial;
      height: 558px;
    }
  }
  .media.-development & {
    aspect-ratio: 600 / 454;

    @media (min-width: 769px) {
      aspect-ratio: initial;
      height: 454px;
    }
  }
  .media.-sales & {
    aspect-ratio: 600 / 510;

    @media (min-width: 769px) {
      aspect-ratio: initial;
      height: 592px;
    }
    @media (min-width: 1440px) {
      translate: 52px 0;
    }
  }
}

.media_imgWrapper {
  position: relative;

  .media.-sales & {
    @media (min-width: 769px) {
      margin-top: 82px;
    }
  }
}

.media_img {
  position: relative;
  z-index: 1;
}

.media_rect {
  position: absolute;

  &.-market1 {
    top: calc(-5 / 167 * 100%);
    left: calc(-30 / 272 * 100%);
    width: calc(91 / 272 * 100%);
    height: calc(68 / 167 * 100%);
    background-color: var(--background-color-black);

    @media (min-width: 769px) {
      top: calc(408 / 368 * 100%);
      left: calc(111 / 600 * 100%);
      width: calc(201 / 600 * 100%);
      height: calc(150 / 368 * 100%);
    }
  }
  &.-market2 {
    top: calc(57 / 368 * 100%);
    left: calc(160 / 600 * 100%);
    width: calc(502 / 600 * 100%);
    height: calc(404 / 368 * 100%);
    background-color: var(--background-color-red);
  }
  &.-development1 {
    top: calc(69 / 365 * 100%);
    left: calc(-68 / 600 * 100%);
    width: calc(171 / 600 * 100%);
    height: calc(92 / 365 * 100%);
    background-color: var(--background-color-red);
  }
  &.-development2 {
    top: calc(335 / 365 * 100%);
    left: calc(255 / 600 * 100%);
    width: calc(268 / 600 * 100%);
    height: calc(119 / 365 * 100%);
    background-color: var(--background-color-gray);
  }
  &.-sales1 {
    top: calc(-44 / 393 * 100%);
    left: calc(-10 / 282 * 100%);
    width: calc(289 / 600 * 100%);
    height: calc(224 / 393 * 100%);
    background-color: var(--background-color-gray);

    @media (min-width: 561px) {
      left: calc(-6 / 282 * 100%);
    }
    @media (min-width: 769px) {
      left: calc(-52 / 600 * 100%);
    }
  }
  &.-sales2 {
    top: calc(71 / 178 * 100%);
    left: calc(-24 / 282 * 100%);
    width: calc(48 / 282 * 100%);
    height: calc(62 / 178 * 100%);
    background-color: var(--background-color-red);

    @media (min-width: 769px) {
      top: calc(-82 / 393 * 100%);
      left: calc(40 / 600 * 100%);
      width: calc(105 / 600 * 100%);
      height: calc(138 / 393 * 100%);
    }
  }
  &.-sales3 {
    top: calc(372 / 393 * 100%);
    left: calc(383 / 600 * 100%);
    width: calc(171 / 600 * 100%);
    height: calc(138 / 393 * 100%);
    background-color: var(--background-color-black);
  }
}