@charset "UTF-8";

/* =========================================================
  world-visual
========================================================= */
/* 背景 + アンカーエリア
--------------------------------------------------------- */
.visual-bg {
  aspect-ratio: 1920 / 1273;
  width: 100%;
  height: 100%;
  background-image: url(/en/sustainability/common/img/world/bg_001.webp);
}
.anchor-area .anc-01 {
  width: 9.8vw;
}
.anchor-area .anc-02 {
  width: 9vw;
  left: 26%;
}
.anchor-area .anc-03 {
  width: 12.5vw;
  left: 42.5%;
  bottom: 22%;
}
.anchor-area .anc-03 .anc-flag {
  background-image: url(/en/sustainability/common/img/world/img_004_002.webp);
}
.anchor-area .anc-04 .anc-flag {
  background-image: url(/en/sustainability/common/img/world/img_005_002.webp);
}

@media screen and (max-width: 1080px) {
  .visual-bg {
    aspect-ratio: 980 / 700;
    background-image: url(/en/sustainability/common/img/world/bg_001_sp.webp);
  }
  .anchor-area .anc-01 {
    right: 17%;
    min-width: 80px;
  }
  .anchor-area .anc-02 {
    left: 24%;
    bottom: 50%;
    min-width: 73px;
  }
  .anchor-area .anc-03 {
    width: 14vw;
    max-width: 120px;
    left: 42%;
    bottom: 21%;
  }
  .anchor-area .anc-04 {
    width: 10vw;
    max-width: 90px;
    right: 27%;
    bottom: 35%;
  }

  .world-content::after {
    background: url(/sustainability/common/img/world/bg_002.webp) no-repeat left top / contain,
      linear-gradient(rgba(102, 171, 255, 1)) no-repeat bottom / 100% 94%;
  }
}
@media screen and (max-width: 769px) {
  .visual-bg {
    aspect-ratio: 980 / 940;
  }
  .anchor-area .anc-01 {
    top: 44%;
  }
  .anchor-area .anc-02 {
    bottom: 35%;
  }
  .anchor-area .anc-03 {
    width: 100px;
    left: 42%;
    bottom: 16%;
  }
  .anchor-area .anc-04 {
    width: 70px;
    bottom: 26%;
  }

  .world-content::after {
    height: calc(100% - 9%);
    background: url(/sustainability/common/img/world/bg_002.webp) no-repeat left top / contain,
      linear-gradient(rgba(102, 171, 255, 1)) no-repeat bottom / 100% 97%;
  }
}