@charset "UTF-8";
.MainImageWrapper {
  position: relative;
  width: 1800px;
  height: auto;
  /* MainImageをラッパーに合わせてスケール */
}
.MainImageWrapper .MainImage {
  position: relative;
  width: 1800px;
  height: 1280px;
  transform-origin: top left; /* スケールの基準点を左上に設定 */
  /* base@2x */
}
.MainImageWrapper .MainImage #MainImageBase {
  position: absolute;
  width: 1289.46px;
  height: 866.86px;
  left: 260.54px;
  top: 124.34px;
  margin-top: -12px;
  margin-right: -3px;
  opacity: 0.8;
}
.MainImageWrapper .MainImage #Year2032 {
  position: absolute;
  width: 100%;
  left: 0;
  top: 942px;
  font-family: var(--font-family-en);
  font-style: normal;
  font-weight: 800;
  font-size: 200px;
  line-height: 296px;
  text-align: center;
  color: #b6dfe1;
}
.MainImageWrapper .MainImage #Cloud03 {
  position: absolute;
  position: absolute;
  width: 239.08px;
  height: 152.32px;
  left: 1273.52px;
  top: 292.08px;
  opacity: 0.8;
}
.MainImageWrapper .MainImage #Cloud04 {
  position: absolute;
  width: 195.43px;
  height: 121.68px;
  left: 1702px;
  top: 566px;
}
.MainImageWrapper .MainImage #Cloud05 {
  position: absolute;
  width: 271px;
  height: 158px;
  left: 1567px;
  top: 167px;
  transform: matrix(-1, 0, 0, 1, 0, 0);
}
.MainImageWrapper .MainImage #Cloud06 {
  position: absolute;
  width: 271.75px;
  height: 189.92px;
  left: -100px;
  top: 458px;
}
.MainImageWrapper .MainImage #Cloud07 {
  position: absolute;
  width: 168.43px;
  height: 128.33px;
  left: 133px;
  top: 228px;
}
.MainImageWrapper .MainImage #Cloud08 {
  position: absolute;
  width: 212.78px;
  height: 148.71px;
  left: 1097px;
  top: 32px;
}
.MainImageWrapper .MainImage #Pavilion01 {
  position: absolute;
  width: 517.11px;
  height: 365.15px;
  left: 240px;
  top: 63px;
  opacity: 1;
}
.MainImageWrapper .MainImage #Astronaut_s {
  position: absolute;
  width: 129.5px;
  height: 173.32px;
  left: 561px;
  top: 304px;
}
.MainImageWrapper .MainImage #Balloon {
  position: absolute;
  width: 167.77px;
  height: 223.49px;
  left: 1170px;
  top: 213px;
}
.MainImageWrapper .MainImage #Bird_s {
  position: absolute;
  width: 151.24px;
  height: 118.76px;
  left: 946px;
  top: 214px;
  transition: left 0.3s ease, top 0.3s ease;
}
.MainImageWrapper .MainImage #Rocket {
  position: absolute;
  width: 243.68px;
  height: 263.56px;
  left: 1206px;
  top: 675px;
}
.MainImageWrapper .MainImage #Astronaut_l {
  position: absolute;
  width: 257.74px;
  height: 337.11px;
  left: 375px;
  top: 812px;
}
.MainImageWrapper .MainImage #Bird_l {
  /* Group 61 */
  position: absolute;
  width: 243.68px;
  height: 263.56px;
  left: 1206px;
  top: 835px;
}
.MainImageWrapper .MainImage #Cloud01 {
  position: absolute;
  width: 555.36px;
  height: 345.79px;
  left: 89px;
  top: 802px;
}
.MainImageWrapper .MainImage #Cloud02 {
  position: absolute;
  width: 555.36px;
  height: 345.79px;
  left: 1175px;
  top: 807px;
}
.MainImageWrapper .MainImage #Cloud04,
.MainImageWrapper .MainImage #Cloud05,
.MainImageWrapper .MainImage #Cloud06,
.MainImageWrapper .MainImage #Cloud07,
.MainImageWrapper .MainImage #Cloud08 {
  transition: opacity 0.5s ease-in-out;
}
.MainImageWrapper .MainImage .custom-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.MainImageWrapper .MainImage .dialog-content {
  background: white;
  border-radius: 12px;
  padding: 20px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.MainImageWrapper .MainImage .dialog-content.animate-in {
  transform: scale(1);
  opacity: 1;
}
.MainImageWrapper .MainImage .dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.MainImageWrapper .MainImage .dialog-header h2 {
  font-size: 18px;
  margin: 0;
}
.MainImageWrapper .MainImage .dialog-header button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
.MainImageWrapper .MainImage .hidden {
  display: none;
}
.MainImageWrapper .MainImage .blank {
  background-color: #b2dedd;
  width: 100%;
  height: 1000px;
}
.MainImageWrapper .MainImage .float-wrap {
  position: absolute;
}
.MainImageWrapper .MainImage .Loupe {
  position: absolute;
  background-image: url("../images/mainimage/loupe.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
  width: 49.04px;
  height: 56.36px;
}
.MainImageWrapper .MainImage .Loupe a {
  position: absolute;
  min-width: 238px;
  height: 62px;
  background: #d15a51;
  border: 3px solid #ffffff;
  border-radius: 31px;
  text-decoration: none;
  padding-right: 40px;
  opacity: 0;
}
.MainImageWrapper .MainImage .Loupe a .icon {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 48px;
  height: 48px;
  cursor: pointer;
}
.MainImageWrapper .MainImage .Loupe a .labelEn {
  position: relative;
  margin: 8px 0 0 67px;
  font-family: var(--font-family-en);
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: #ffffff;
}
.MainImageWrapper .MainImage .Loupe a .labelJa {
  position: relative;
  margin: 0px 0 0 67px;
  font-weight: 500;
  font-size: 18px;
  line-height: 22px;
  color: #ffffff;
  white-space: nowrap;
}
.MainImageWrapper .MainImage .Loupe a::after {
  position: absolute;
  background-image: url("../images/mainimage/balloon_arrow.png");
  background-repeat: no-repeat;
  background-position: top center;
  content: "";
  left: 149px;
  top: 51px;
  width: 32px;
  height: 45px;
  z-index: 1;
}
.MainImageWrapper .MainImage #mapLoupe01 {
  left: 628px;
  top: 251px;
}
.MainImageWrapper .MainImage #mapLoupe01 a {
  left: -139px;
  top: -16px;
}
.MainImageWrapper .MainImage #mapLoupe02 {
  left: 799px;
  top: 345px;
}
.MainImageWrapper .MainImage #mapLoupe02 a {
  left: -96px;
  top: -1px;
}
.MainImageWrapper .MainImage #mapLoupe03 {
  left: 1150px;
  top: 198px;
}
.MainImageWrapper .MainImage #mapLoupe03 a {
  left: -14px;
  top: -14px;
}
.MainImageWrapper .MainImage #mapLoupe04 {
  left: 990px;
  top: 154px;
  transition: left 0.3s ease, top 0.3s ease;
}
.MainImageWrapper .MainImage #mapLoupe04 a {
  left: -58px;
  top: 0px;
}
.MainImageWrapper .MainImage #mapLoupe05 {
  left: 1113px;
  top: 378px;
}
.MainImageWrapper .MainImage #mapLoupe05 a {
  left: -69px;
  top: -10px;
}
.MainImageWrapper .MainImage #mapLoupe06 {
  left: 1138px;
  top: 751px;
}
.MainImageWrapper .MainImage #mapLoupe06 a {
  left: -93px;
  top: -11px;
}
.MainImageWrapper .MainImage #mapLoupe07 {
  left: 788px;
  top: 709px;
}
.MainImageWrapper .MainImage #mapLoupe07 a {
  left: -105px;
  top: -5px;
}

@media (max-width: 550px) {
  .MainImageWrapper .MainImage #Bird_s {
    top: 134px;
  }
  .MainImageWrapper .MainImage #mapLoupe01 {
    left: 628px;
    top: 251px;
  }
  .MainImageWrapper .MainImage #mapLoupe01 a {
    left: -79px;
    top: -16px;
  }
  .MainImageWrapper .MainImage #mapLoupe02 {
    left: 799px;
    top: 345px;
  }
  .MainImageWrapper .MainImage #mapLoupe02 a {
    left: -96px;
    top: -31px;
  }
  .MainImageWrapper .MainImage #mapLoupe03 {
    left: 1150px;
    top: 198px;
  }
  .MainImageWrapper .MainImage #mapLoupe03 a {
    left: -114px;
    top: -24px;
  }
  .MainImageWrapper .MainImage #mapLoupe04 {
    left: 990px;
    top: 74px;
  }
  .MainImageWrapper .MainImage #mapLoupe04 a {
    left: -58px;
    top: -40px;
  }
  .MainImageWrapper .MainImage #mapLoupe05 {
    left: 1113px;
    top: 378px;
  }
  .MainImageWrapper .MainImage #mapLoupe05 a {
    left: -129px;
    top: -44px;
  }
  .MainImageWrapper .MainImage #mapLoupe06 {
    left: 1138px;
    top: 751px;
  }
  .MainImageWrapper .MainImage #mapLoupe06 a {
    left: -93px;
    top: -36px;
  }
  .MainImageWrapper .MainImage #mapLoupe07 {
    left: 788px;
    top: 709px;
  }
  .MainImageWrapper .MainImage #mapLoupe07 a {
    left: -105px;
    top: -35px;
  }
}