@charset "UTF-8";

#frame-map {
  position: relative;
/*
  --mt-frame-map: 40;
  --height-frame-map: 340;

  margin-top: calc(var(--mt-frame-map) * 1px);
  height: calc(var(--height-frame-map) * 1px);
border: solid 0px yellow;
*/
}
.parts#map {
  --mt-parts-map: 0;
  --width-parts-map: 1001;

  margin-top: calc(var(--mt-parts-map) * 1px);
  width: calc(var(--width-parts-map) * 1px * 0.5);
}
#embed-map {
  --width-embed-map: 360;
  --height-embed-map: 360;
  --offset-embed-map: 0;

  position: absolute;
  right: calc(50% + var(--offset-embed-map) * 1px * 0.5);
  top: 14%;

  width: calc(var(--width-embed-map) * 1px * 0.5);
  height: calc(var(--height-embed-map) * 1px * 0.5);
border: solid yellow 0px;
}
.iframe-map {
  width: 100%;
  height: 100%;
}
.parts#text-map {
  --offset-text-map: 0;
  --width-text-map: 400;

  position: absolute;
  text-align: left;
  color: white;

  top: 7%;
  left: calc(50% + var(--offset-text-map) * 1px);
  width: calc(var(--width-text-map) * 1px * 0.5);

  font-size: 10px;
  transform: scale(0.8);
  text-align: left;
border: solid red 0px;

}
#text-map .large {
  font-size: 12px;
  font-weight: bold;
}
#text-map .medium {
}


/* 1001px未満 */
@media screen and (max-width: 1000px) {
  #frame-map {
  }
  .parts#map {
    margin-top: calc(var(--mt-parts-map) / 1000 * 100vw);
    width: calc(var(--width-parts-map) / 1000 * 100vw );
  }
  #embed-map {
    right: calc(50% + var(--offset-embed-map) / 1000 * 100vw );
    width: calc(var(--width-embed-map) / 1000 * 100vw );
    height: calc(var(--height-embed-map) / 1000 * 100vw );
  }
  .iframe-map {
  }
  .parts#text-map {
    left: calc(50% + var(--offset-text-map) / 1000 * 100vw * 2);
    width: calc(var(--width-text-map) / 1000 * 100vw);

    font-size: 2vw;
  }
  #text-map .large {
    font-size: 2.5vw;
  }
  #text-map .medium {
  }
}