/* 4か月表示 */
@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 {		/* 4つのうち1つ目 */
  --offset-button-month-1: 200;

  right: calc(50% + var(--offset-button-month-1) * 1px * 0.64);
}
#button-month-2 {		/* 4つのうち1つ目 */
  --offset-button-month-2: 20;

  right: calc(50% + var(--offset-button-month-2) * 1px * 0.64);
}
#button-month-3 {		/* 4つのうち1つ目 */
  --offset-button-month-3: 20;

  left: calc(50% + var(--offset-button-month-3) * 1px * 0.64);
}
#button-month-4 {		/* 4つのうち4つ目 */
  --offset-button-month-4: 200;

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

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

}
#triangle-2 {
  margin: 0 auto;
  left: 0;
  right: 0;
}
#triangle-3 {
  --offset-triangle-3: 170;

  left: calc(50% + var(--offset-triangle-3) * 1px * 0.64);
}
#triangle-4 {
  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 {
    right: calc(50% + var(--offset-button-month-2) / 1000 * 100vw);
  }
  #button-month-3 {
    left: calc(50% + var(--offset-button-month-3) / 1000 * 100vw);
  }
  #button-month-4 {
    left: calc(50% + var(--offset-button-month-4) / 1000 * 100vw);
  }
  .triangle {
    width: calc(var(--width-triangle) / 1000 * 100vw);
  }
  #triangle-1 {
    right: calc(50% + var(--offset-triangle-1) / 1000 * 100vw);
  }
  #triangle-2 {
  }
  #triangle-3 {
    left: calc(50% + var(--offset-triangle-3) / 1000 * 100vw);
  }
}