@charset "UTF-8";

.button-month {
  --width-button-month: 278;
  --top-button-month: 1750;

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

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

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

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

/* 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);
  }
}


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

    top: calc(var(--top-button-month) / 1000 * 100vw);
    width: calc(var(--width-button-month) / 1000 * 100vw * 0.5);
  }
  #button-month-1 {
    --offset-button-month-1: 50;
    right: calc(50% + var(--offset-button-month-1) / 1000 * 100vw);
  }
  #button-month-2 {
    --offset-button-month-2: 50;
    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);
  }
}