@charset "UTF-8";

#framepc-map {
  --mt-framepc-map: 50;
  --height-framepc-map: 650;

  position: relative;
  margin-top: calc(var(--mt-framepc-map) * 1px);
  height: calc(var(--height-framepc-map) * 1px);
border: solid white 0px;
}
#framesp-map {
}
.map {
  --width-map: 1000;
/*  width: calc(var(--width-map) * 1px); */
}
.embed-map {
  --offset-embed-map: 50;

  --width-embed-map: 450;
  --height-embed-map: 450;

  position: absolute;
  width: calc(var(--width-embed-map) * 1px);
  height: calc(var(--height-embed-map) * 1px);

  top: 20%;
  right: calc(50% + var(--offset-embed-map) * 1px);
}
.iframe-map {
  width: 100%;
  height: 100%;
}
.map-text {
  --width-map-text: 550;
  --top-map-text: 100;
  --offset-map-text: 0;

  position: absolute;
  top: calc(var(--top-map-text) * 1px);
  left: calc(50% + var(--offset-map-text) * 1px);
  width: calc(var(--width-map-text) * 1px);
  text-align: left;
  font-size: 20px;
  line-height: 140%;

  color: black;
border: solid red 0px;
}
.map-text .venue {
}
.map-text .howto {
}
.map-text .address {
}
.map-text .xl {
  font-size: 32px;
}
.map-text .large {
  font-size: 32px;
}

/* 1201px未満 */
@media screen and (max-width: 1200px) {
  #framepc-map {
  }
  #framesp-map {
    --mt-frame-map: 30;

    position: relative;
    margin-top: calc(var(--mt-frame-map) / 1000 * 100vw);
  }
  .map {
     width: calc(var(--width-map) / 1000 * 100vw);
  }
  .embed-map {
    --width-embed-map: 400;
    --height-embed-map: 400;
    --offset-embed-map: 0;

    width: calc(var(--width-embed-map) / 1000 * 100vw);
    height: calc(var(--height-embed-map) / 1000 * 100vw);
    right: calc(50% + var(--offset-embed-map) / 1000 * 100vw);
  }
  .iframe-map {
  }
  .map-text {
    --width-map-text: 370;
    --top-map-text: 100;
    --offset-map-text: 60;

    position: absolute;
    top: calc(var(--top-map-text) / 1000 * 100vw);
    left: calc(50% + var(--offset-map-text) / 1000 * 100vw);
    width: calc(var(--width-map-text) / 1000 * 100vw);
    text-align: left;

    font-size: 2.5vw;
    line-height: 150%;

    color: black;
border: solid red 0px;
  }
  .map-text .venue {
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .map-text .howto {
    margin-top: -60px;
  }
  .map-text .address {
    margin-top: 0;
    margin-bottom: 0;
  }
  .map-text .xl {
    font-size: 4vw;
  }
  .map-text .large {
    font-size: 3vw;
  }
}