@charset "UTF-8";

.button-month {
  --width-button-month: 270;
  --top-button-month: 1720;

  top: calc(var(--top-button-month) * 1px);
  width: calc(var(--width-button-month) * 1px);
  z-index: 3;
}
#button-month-1 {
  --offset-button-month-1: 80;

  right: calc(50% + var(--offset-button-month-1) * 1px);
}

#button-month-2 {
  --offset-button-month-2: 80;

  left: calc(50% + var(--offset-button-month-2) * 1px);
}
.triangle {
  --width-triangle: 22;
  --top-triangle: 1740;

  position: absolute;
  top: calc(var(--top-triangle) * 1px);
  width: calc(var(--width-triangle) * 1px);
  z-index: 3;
}
#triangle-1 {
  --offset-triangle-1: 180;

  margin: 0 auto;
  left: 0;
  right: 0;
}

/* 2501px未満 */
@media screen and (max-width: 2500px) {
  .button-month {
    top: calc(var(--top-button-month) / 2500 * 100vw);
    width: calc(var(--width-button-month) / 2500 * 100vw);
  }
  #button-month-1 {
    right: calc(50% + var(--offset-button-month-1) / 2500 * 100vw);
  }
  #button-month-2 {
    left: calc(50% + var(--offset-button-month-2) / 2500 * 100vw);
  }
  .triangle {
    top: calc(var(--top-triangle) / 2500 * 100vw);
    width: calc(var(--width-triangle) / 2500 * 100vw);
  }
  #triangle-1 {
  }
}


/* 1001px未満 */
@media screen and (max-width: 1000px) {
  .button-month {
    --top-button-month: 1020;
    --width-button-month: 389;

    top: calc(var(--top-button-month) / 1000 * 100vw);
    width: calc(var(--width-button-month) / 1000 * 100vw * 0.5);
  }
  #button-month-1 {
    right: calc(50% + var(--offset-button-month-1) / 1000 * 100vw);
  }
  #button-month-2 {
    left: calc(50% + var(--offset-button-month-2) / 1000 * 100vw);
  }
  .triangle {
    --top-triangle: 1030;
    top: calc(var(--top-triangle) / 1000 * 100vw);
    width: calc(var(--width-triangle) / 1000 * 100vw);
  }
  #triangle-1 {
  }
}