:root{
  --footer-height: 50px;
  --background-color-secondary: #EFF3F6;
  --background-color-tip: #87CC1D;
  --arrow-color: #BDC0C3;
  --arrow-color-hover: #000000;
}

/* common sytle */

html {
  position: relative;
  min-height: 100%;
}

body {
  background-color: #FFFFFF;
  margin-bottom: var(--footer-height);
}

@media (min-width:992px) {
  body {
    line-height: 4;
  }
}

@media (max-width:991px) {
  body {
    line-height: 3;
  }
}

div {
  text-align: center;
}

/* arrow layout */
.arrowarea {
  cursor: pointer;
  color: var(--arrow-color);
  font-size: 1.0em;
}
.arrowarea:hover {
  color: var(--arrow-color-hover);
}

/* header */
.header-band {
  height: 3px;
  background-color: var(--background-color-tip);
}

@media (min-width:768px) {
  .header {
    height: 20px;
  }
}
@media (min-width:576px) and (max-width:767px) {
  .header {
    height: 10px;
  }
}
@media (max-width:575px) {
  .header {
    height: 0px;
  }
}

/* year,month */
.year,.month {
  font-size: 1.0em;
}

/* week */
.week-title {
  background-color: var(--background-color-secondary);
  font-size: 0.8em;
}
.week-title {
  line-height: 2;
}

/* day */
.day {
  font-size: 1.2em;
}
@media (max-width:991px) {
  .day {
    padding-left: 10px;
    padding-right: 10px;
  }
}

.day-type-0 {
  color: black;
}
.day-type-1 {
  color: blue;
}
.day-type-2 {
  color: red;
}
/* shukujitsu */
.day-type-3 {
  color: red;
}
@media (min-width:321px) {
  .day-type-3::after {
    content: "";
    background: var(--background-color-tip);
    float: left;
    position: relative;
    display: block;
    top: 72%;
    left: 50%;
    height: 6px;
    width: 6px;
    border-radius: 100%;
  }
}

.day-type-9 {
  opacity: 0.4;
}

.today {
  text-decoration: underline;
  font-weight: bold;
}

/* tooltip */
.tooltip-inner {
  background-color: var(--background-color-tip);
  color: #000000;
}

.bs-tooltip-bottom .arrow::before {
  border-bottom-color: var(--background-color-tip);
}

.tooltip .arrow {
  display: none;
}

/* footer */
.footer {
  font-size: 0.8em;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: var(--footer-height);
  line-height: var(--footer-height);
}
.copy {
  border-top: .05rem solid var(--background-color-secondary);
}
.copy > a {
  text-decoration-color: #6c757d !important;
}