@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");

.calender-alert {
  --root-font-size: 16;
  --em: 1em / var(--root-font-size);
  --font-family-noto-sans-jp: "Noto Sans JP";
  --root-font-family: var(--font-family-noto-sans-jp), sans-serif;

  padding-block: 70px 65px;
  font-family: var(--root-font-family);
  font-size: calc(var(--root-font-size) * 1px);
  background-color: #daf0f6;
}

.calender-alert__inner {
  max-inline-size: 899px;
  padding-inline: 50px;
  margin-inline: auto;
}

.calender-alert__heading {
  position: relative;
  inline-size: fit-content;
  margin-inline: auto;
  font-size: calc(26 * var(--em));
  font-weight: 600;
  line-height: calc(32 / 26);
  color: #1d2088;
}

.calender-alert__heading::before,
.calender-alert__heading::after {
  position: absolute;
  inset-block-start: 3px;
  block-size: 1.2em;
  content: "";
  border-inline-start: 2px solid currentcolor;
}

.calender-alert__heading::before {
  inset-inline-start: -5%;
  rotate: -40deg;
}

.calender-alert__heading::after {
  inset-inline-end: -5%;
  rotate: 40deg;
}

.calender-alert__heading + .calender-alert__content {
  margin-block-start: 39px;
}

.calender-alert__content {
  position: relative;
  padding-block: 50px 44px;
  padding-inline: 20px;
  background-color: #fff;
}

.calender-alert__content::before,
.calender-alert__content::after {
  position: absolute;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
}

.calender-alert__content::before {
  inset-block-start: 30px;
  inset-inline-start: 32px;
  inline-size: 88px;
  block-size: 150px;
  background-image: url("/shared/images/calendar/banner/bg_block_01_ava_tc.png");
}

.calender-alert__content::after {
  inset-block-end: 32px;
  inset-inline-end: 32px;
  inline-size: 86px;
  block-size: 86px;
  background-image: url("/shared/images/calendar/banner/bg_block_02_ava_tc.png");
}

.calender-alert__heading-sub {
  position: relative;
  inset-inline-end: 21px;
  inline-size: fit-content;
  margin-inline: auto;
  font-size: calc(38 * var(--em));
  font-weight: 700;
  line-height: calc(48 / 38);
  color: #1d2088;
}

.calender-alert__heading-sub::after {
  position: absolute;
  inset-block-end: -15px;
  inset-inline-end: -78px;
  inline-size: 74px;
  block-size: 106px;
  content: "";
  background-image: url("/shared/images/calendar/banner/ic_phone_ava_tc.png");
  background-repeat: no-repeat;
  background-size: contain;
}

.calender-alert__heading-sub ._under-line {
  position: relative;
  z-index: 0;
}

.calender-alert__heading-sub ._under-line::after {
  position: absolute;
  inset-block-end: 3px;
  inset-inline-start: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 8px;
  content: "";
  background-color: #ffaf26;
}

.calender-alert__heading-sub + .calender-alert__info {
  margin-block-start: 38px;
}

.calender-alert__info {
  position: relative;
  max-inline-size: 429px;
  padding: 16px 20px 17px;
  margin-inline: auto;
  background-color: #ffaf26;
  border-radius: 10px;
  box-shadow: inset -1px -1px 6px rgb(71 51 10 / 0.16);
}

.calender-alert__info::before {
  position: absolute;
  inset-block-start: -17px;
  inset-inline-start: 50%;
  inline-size: 29px;
  block-size: 18px;
  content: "";
  background: #ffaf26;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  translate: -50%;
}

.calender-alert__column {
  display: flex;
  column-gap: 28px;
  align-items: center;
  justify-content: center;
}

.calender-alert__figure {
  max-inline-size: 90px;
}

.calender-alert__detail {
  font-size: calc(25 * var(--em));
  font-weight: 600;
  line-height: calc(31 / 25);
  color: #fff;
}

.calender-alert__content + .calender-alert__note {
  margin-block-start: 36px;
}

.calender-alert__note {
  position: relative;
  inline-size: fit-content;
  margin-inline: auto;
  font-size: calc(12 * var(--em));
  font-weight: 400;
  line-height: calc(18 / 12);
  color: #000;
}

.calender-alert__note > li {
  display: inline-block;
  padding-inline-start: 1em;
  text-indent: -0.5em;
}

.calender-alert__note > li::before {
  display: inline-block;
  content: "※";
}

@media (min-width: 768px), print {
  ._sp {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  ._pc {
    display: none !important;
  }

  .calender-alert {
    padding-block: calc(75px / 2) calc(30px / 2);
  }

  .calender-alert__inner {
    max-inline-size: 100%;
    padding-inline: calc(50px / 2);
  }

  .calender-alert__heading {
    font-size: calc((26 / 2) * var(--em));
  }

  .calender-alert__heading + .calender-alert__content {
    margin-block-start: calc(38px / 2);
  }

  .calender-alert__content {
    padding-block: 25px calc(52px / 2);
  }

  .calender-alert__content::before {
    inset-block-start: calc(20px / 2);
    inset-inline-start: calc(20px / 2);
    inline-size: calc(62px / 2);
    block-size: calc(106px / 2);
  }

  .calender-alert__content::after {
    inset-block-end: calc(20px / 2);
    inset-inline-end: calc(20px / 2);
    inline-size: calc(62px / 2);
    block-size: calc(62px / 2);
  }

  .calender-alert__heading-sub {
    inset-inline-end: -1px;
    font-size: calc((40 / 2) * var(--em));
    line-height: calc(54 / 40);
  }

  .calender-alert__heading-sub::after {
    inset-block-end: -35px;
    inset-inline-end: 1px;
    inline-size: calc(78px / 2);
    block-size: calc(111px / 2);
  }

  .calender-alert__heading-sub ._under-line::after {
    block-size: calc(8px / 2);
  }

  .calender-alert__info + .calender-alert__button {
    margin-block-start: calc(54px / 2);
  }

  .calender-alert__button {
    --button-inline-size: calc(417px / 2);
    --button-bg-color: #ffaf26;
    --button-text-color: #fff;
    --button-box-shadow: 0 calc(6px / 2) 0 #dc9926;
    --duration: 0.3s;

    position: relative;
    inset-inline-start: 6px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    place-items: center;
    inline-size: min(100%, var(--button-inline-size));
    padding-block: 5px 7px;
    padding-inline: calc(23px / 2);
    margin-inline: auto;
    font: inherit;
    font-size: calc(var(--em) * (26 / 2));
    font-weight: 700;
    line-height: 1;
    color: var(--button-text-color);
    letter-spacing: 0.03em;
    text-decoration: none;
    appearance: none;
    cursor: pointer;
    background-color: var(--button-bg-color);
    border: 0;
    border-radius: calc(30px / 2);
    box-shadow: var(--button-box-shadow);
    transition: opacity var(--duration);
  }

  .calender-alert__button::after,
  .calender-alert__button::before {
    content: "";
  }

  .calender-alert__button::after {
    justify-self: end;
    inline-size: calc(36px / 2);
    block-size: calc(36px / 2);
    background-image: url("/shared/images/calendar/banner/ic_arrow_01_ava_tc.png");
    background-repeat: no-repeat;
    background-size: contain;
  }

  .calender-alert__content + .calender-alert__note {
    margin-block-start: calc(20px / 2);
  }

  .calender-alert__note {
    font-size: calc((20 / 2) * var(--em));
    line-height: calc(28 / 20);
  }

  .calender-alert__note > li {
    display: list-item;
  }
}

@media (any-hover: hover) {
  .calender-alert__button:hover {
    opacity: 0.7;
  }
}