/* 3か月表示 */
@charset "UTF-8";

.button-month {
  --width-button-month: 139;

  bottom: 16.5%;
  width: calc(var(--width-button-month) * 1px * 0.64);
  z-index: 3;
}
#button-month-1 {		/* 3つのうち一番左 */
  --offset-button-month-1: 120;

  right: calc(50% + var(--offset-button-month-1) * 1px * 0.64);
}
#button-month-2 {		/* 3つのうち真ん中 */
  margin: 0 auto;
  left: 0;
  right: 0;
}
#button-month-3 {		/* 3つのうち一番右 */
  --offset-button-month-3: 120;

  left: calc(50% + var(--offset-button-month-3) * 1px * 0.64);
}
.triangle {
  --width-triangle: 12;

  position: absolute;
  bottom: 17.5%;
}
#triangle-1 {
  --offset-triangle-1: 85;
  right: calc(50% + var(--offset-triangle-1) * 1px * 0.64);

}
#triangle-2 {
  --offset-triangle-2: 85;
  left: calc(50% + var(--offset-triangle-2) * 1px * 0.64);
}
#triangle-3 {
  display: none;
}


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