/* !custom properties */
:root {
  --breakpoint-pc-min: 744;
  --fluid-min-width: 320;
  --fluid-cnt-width: 390;
  --fluid-max-width: 743;
}
@media (min-width: 744px) {
  :root {
    --fluid-min-width: 744;
    --fluid-cnt-width: 1360;
    --fluid-max-width: var(--fluid-cnt-width);
  }
}
:root {
  --1vw: 1vw;
  --100vw: 100vw;
}

:root {
  --fluid-rem: clamp(var(--fluid-min-width) / var(--fluid-cnt-width) * 1rem, 16 / var(--fluid-cnt-width) * var(--100vw), var(--fluid-max-width) / var(--fluid-cnt-width) * 1rem);
}

.common-period .common-period-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--fluid-rem) * 0.625);
  padding: calc(var(--fluid-rem) * 1.25) calc(var(--fluid-rem) * 1.25) calc(var(--fluid-rem) * 1.5);
  background-color: var(--color-green);
}
.common-period .common-period-banner__burst {
  position: absolute;
  inset-block: 0;
  width: calc(var(--fluid-rem) * 11.375);
  max-width: none;
  height: 100%;
}
.common-period .common-period-banner__burst img {
  width: 100%;
  max-width: none;
  height: 100%;
}
.common-period .common-period-banner__burst--left {
  left: 0;
}
.common-period .common-period-banner__burst--right {
  right: 0;
}
.common-period .common-period-banner__item {
  position: relative;
  width: 100%;
  max-width: calc(var(--fluid-rem) * 19.375);
  background-color: var(--color-white);
}
.common-period .common-period-banner__head {
  padding-block: calc(var(--fluid-rem) * 0.25);
  background-color: var(--color-text);
  color: var(--color-white);
  font-weight: 900;
  font-size: max(10px, var(--fluid-rem) * 0.9375);
  line-height: 1.2666666667;
  letter-spacing: 0.06em;
  text-align: center;
}
.common-period .common-period-banner__date {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 calc(var(--fluid-rem) * 0.125);
  padding-block: calc(var(--fluid-rem) * 0.4375) calc(var(--fluid-rem) * 0.875);
  color: var(--color-red);
  font-family: "Oswald", "Noto Sans JP", sans-serif;
}
.common-period .common-period-banner__year,
.common-period .common-period-banner__md {
  display: inline-flex;
  align-items: baseline;
}
.common-period .common-period-banner__num {
  font-family: "Oswald", "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: max(10px, var(--fluid-rem) * 1.6875);
  line-height: 1;
}
.common-period .common-period-banner__year .common-period-banner__num {
  position: relative;
  inset-block-start: calc(var(--fluid-rem) * -0.1875);
}
.common-period .common-period-banner__num--lg {
  font-size: max(10px, var(--fluid-rem) * 2.875);
}
.common-period .common-period-banner__unit {
  position: relative;
  inset-block-start: calc(var(--fluid-rem) * -0.3125);
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: max(10px, var(--fluid-rem) * 1.4375);
  line-height: 1;
}
.common-period .common-period-banner__unit--dow {
  margin-inline-end: -0.55em;
  letter-spacing: -0.1em;
}
.common-period .common-period-banner__arrow {
  position: relative;
  width: 0;
  height: 0;
  border-left: calc(var(--fluid-rem) * 0.9375) solid transparent;
  border-right: calc(var(--fluid-rem) * 0.9375) solid transparent;
  border-top: calc(var(--fluid-rem) * 1) solid var(--color-text);
}
.common-period .common-period__note {
  margin-block-start: calc(var(--fluid-rem) * 0.625);
  font-weight: 500;
  font-size: max(10px, var(--fluid-rem) * 0.75);
  line-height: 1.5;
  letter-spacing: 0.08em;
}
.common-period .common-schedule {
  margin-block-start: calc(var(--fluid-rem) * 3);
}
.common-period .common-schedule__title {
  margin-block-end: calc(var(--fluid-rem) * 1.25);
  font-weight: 900;
  font-size: max(10px, var(--fluid-rem) * 1);
  line-height: 2.25;
  letter-spacing: 0.08em;
}
.common-period .common-schedule__list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--fluid-rem) * 0.625);
  list-style: none;
}
.common-period .common-schedule__item {
  border: 3px solid var(--color-text);
  background-color: var(--color-white);
}
.common-period .common-schedule__item--highlight {
  background-color: var(--color-yellow);
}
.common-period .common-schedule__head {
  display: flex;
  align-items: center;
  gap: calc(var(--fluid-rem) * 0.5);
  min-height: calc(var(--fluid-rem) * 2.875);
  padding-inline: calc(var(--fluid-rem) * 1.25);
  padding-block: calc(var(--fluid-rem) * 0.375);
  background-color: var(--color-text);
}
.common-period .common-schedule__num {
  display: grid;
  place-items: center;
  width: calc(var(--fluid-rem) * 1.625);
  height: calc(var(--fluid-rem) * 1.625);
  flex: 0 0 calc(var(--fluid-rem) * 1.625);
  border-radius: 50%;
  background-color: var(--color-yellow);
  color: var(--color-text);
  font-family: "Oswald", "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: max(10px, var(--fluid-rem) * 0.875);
  line-height: 1;
}
.common-period .common-schedule__date {
  color: var(--color-white);
  font-weight: 900;
  font-size: max(10px, var(--fluid-rem) * 0.875);
  line-height: 1.5714285714;
  letter-spacing: 0.08em;
}
.common-period .common-schedule__name {
  display: block;
  padding-inline: calc(var(--fluid-rem) * 1.25);
  padding-block: calc(var(--fluid-rem) * 0.75) calc(var(--fluid-rem) * 1);
  font-weight: 700;
  font-size: max(10px, var(--fluid-rem) * 0.875);
  line-height: 2;
  letter-spacing: 0.08em;
}
@media (min-width: 744px) {
  .common-period .common-period-banner {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: calc(var(--fluid-rem) * 1.375);
    padding: calc(var(--fluid-rem) * 2.5) calc(var(--fluid-rem) * 3.75);
  }
  .common-period .common-period-banner__burst {
    width: calc(var(--fluid-rem) * 9.25);
  }
  .common-period .common-period-banner__item {
    display: flex;
    flex-direction: column;
    max-width: calc(var(--fluid-rem) * 32.0625);
    flex: 0 1 calc(var(--fluid-rem) * 32.0625);
  }
  .common-period .common-period-banner__head {
    padding-block: calc(var(--fluid-rem) * 0.375);
    font-size: max(10px, var(--fluid-rem) * 1.375);
  }
  .common-period .common-period-banner__date {
    flex: 1 1 auto;
    align-content: center;
    padding-block: calc(var(--fluid-rem) * 0.625) calc(var(--fluid-rem) * 1.25);
  }
  .common-period .common-period-banner__num {
    font-size: max(10px, var(--fluid-rem) * 2.5);
  }
  .common-period .common-period-banner__year .common-period-banner__num {
    inset-block-start: calc(var(--fluid-rem) * -0.25);
  }
  .common-period .common-period-banner__num--lg {
    font-size: max(10px, var(--fluid-rem) * 4.25);
  }
  .common-period .common-period-banner__unit {
    inset-block-start: calc(var(--fluid-rem) * -0.4375);
    font-size: max(10px, var(--fluid-rem) * 2.1875);
  }
  .common-period .common-period-banner__arrow {
    align-self: center;
    border-left: calc(var(--fluid-rem) * 1.5) solid var(--color-text);
    border-top: calc(var(--fluid-rem) * 1.5) solid transparent;
    border-bottom: calc(var(--fluid-rem) * 1.5) solid transparent;
    border-right: 0;
  }
  .common-period .common-period__note {
    margin-block-start: calc(var(--fluid-rem) * 1.25);
    font-size: max(10px, var(--fluid-rem) * 1);
    line-height: 2;
  }
  .common-period .common-schedule {
    margin-block-start: calc(var(--fluid-rem) * 2.5);
  }
  .common-period .common-schedule__title {
    font-size: max(10px, var(--fluid-rem) * 1.375);
    line-height: 1.4090909091;
  }
  .common-period .common-schedule__list {
    flex-direction: row;
    gap: calc(var(--fluid-rem) * 0.375);
  }
  .common-period .common-schedule__item {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    height: calc(var(--fluid-rem) * 11.25);
  }
  .common-period .common-schedule__head {
    min-height: calc(var(--fluid-rem) * 3.9375);
    padding-inline: calc(var(--fluid-rem) * 0.4375);
    padding-block: 0;
  }
  .common-period .common-schedule__num {
    width: calc(var(--fluid-rem) * 2.25);
    height: calc(var(--fluid-rem) * 2.25);
    flex: 0 0 calc(var(--fluid-rem) * 2.25);
    font-size: max(10px, var(--fluid-rem) * 1.25);
  }
  .common-period .common-schedule__date {
    font-size: max(10px, var(--fluid-rem) * 1);
    line-height: 1.375;
    white-space: nowrap;
  }
  .common-period .common-schedule__name {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    padding-block: 0;
    font-size: max(10px, var(--fluid-rem) * 1.125);
    line-height: 1.5555555556;
    text-align: center;
  }
}