@charset "UTF-8";

/* =====================
  reset
===================== */
.u-inner {
  @media only screen and (width <= 768px) {
    padding-inline: calc((100 / 390) * 16 * 1vw);
  }
}

/* =====================
  common
===================== */

/* ==== c-head ==== */
.c-head {
  display: block grid;
  gap: 16px;
  margin-block-end: 59px;

  @media only screen and (width <= 768px) {
    gap: calc((100 / 390) * 8 * 1vw);
    margin-block-end: 8vw;
  }
}

/* 制定 */
.c-date {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--black);

  @media only screen and (width <= 768px) {
    font-size: calc((100 / 390) * 13 * 1vw);
  }
}

/* 見出し */
.c-title {
  font-size: 48px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--blue);

  @media only screen and (width <= 768px) {
    font-size: calc((100 / 390) * 28 * 1vw);
  }
}

/* ==== 小見出し ==== */
.c-sub-title {
  --_before-inset-block-start: 20px;
  --_before-inline-size: 20px;

  @media only screen and (width <= 768px) {
    --_before-inset-block-start: 3.4vw;
    --_before-inline-size: calc((100 / 390) * 12 * 1vw);
  }

  position: relative;
  padding-inline-start: 36px;
  margin-block-end: 14px;
  font-size: 32px;
  font-weight: 600;
  line-height: 180%;
  color: var(--main);
  letter-spacing: 0.96px;

  @media only screen and (width <= 768px) {
    padding-inline-start: 5vw;
    margin-block-end: 1.8vw;
    font-size: calc((100 / 390) * 20 * 1vw);
    letter-spacing: calc((100 / 390) * 0.6 * 1vw);
  }

  &::before {
    position: absolute;
    inset-block-start: var(--_before-inset-block-start);
    inset-inline-start: 0;
    display: block flow;
    inline-size: var(--_before-inline-size);
    aspect-ratio: 1 / 1;
    content: '';
    background: currentcolor;
  }
}

/* ==== [data-attribute] ==== */
[data-color='red'] {
  font-weight: 500;
  color: #ff2525;

  &:is(a, button) {
    transition: all 250ms ease 0s;

    @media (any-hover: hover) {
      &:hover {
        text-decoration: underline;
        opacity: 0.7;
      }
    }
  }
}

/* =====================
  important
===================== */
.important {
  padding-block: 120px;

  @media only screen and (width <= 768px) {
    padding-block: 16.7vw;
  }

  /* ==== contents ==== */
  .contents {
    display: block grid;
    gap: 25.2px;

    @media only screen and (width <= 768px) {
      gap: 4vw;
    }

    /* ==== p ==== */
    & p {
      font-size: 20px;
      line-height: 2;

      @media only screen and (width <= 768px) {
        font-size: calc((100 / 390) * 16 * 1vw);
      }
    }

    /* ==== ul ==== */
    & ul {
      display: block grid;
      gap: 17.6px;
      max-inline-size: 970px;
      margin-block-start: 15px;

      @media only screen and (width <= 768px) {
        gap: 2vw;
        max-inline-size: 100%;
        margin-block-start: 2.2vw;
      }

      & li {
        --_before-inset-block-start: 17px;
        --_before-inset-inline-start: 8px;
        --_before-inline-size: 6px;

        @media only screen and (width <= 768px) {
          --_before-inset-block-start: 3.2vw;
          --_before-inset-inline-start: 1vw;
          --_before-inline-size: calc((100 / 390) * 4 * 1vw);
        }

        position: relative;
        padding-inline-start: 30px;
        font-size: 18px;
        line-height: 2;

        @media only screen and (width <= 768px) {
          padding-inline-start: 3.2vw;
          font-size: calc((100 / 390) * 15 * 1vw);
        }

        &:has([data-font='large']) {
          --_before-inset-block-start: 22px;

          @media only screen and (width <= 768px) {
            --_before-inset-block-start: calc((100 / 390) * 16 * 1vw);
          }
        }

        & [data-font='large'] {
          font-size: 24px;
          font-weight: 400;

          @media only screen and (width <= 768px) {
            font-size: calc((100 / 390) * 18 * 1vw);
          }
        }

        &::before {
          position: absolute;
          inset-block-start: var(--_before-inset-block-start);
          inset-inline-start: var(--_before-inset-inline-start);
          display: block flow;
          inline-size: var(--_before-inline-size);
          aspect-ratio: 1 / 1;
          content: '';
          background: var(--black);
          border-radius: calc(infinity * 1px);
        }

        & p {
          margin-block-start: 18px;
          font-size: 18px;

          @media only screen and (width <= 768px) {
            margin-block-start: 2.1vw;
            font-size: calc((100 / 390) * 15 * 1vw);
          }
        }
      }
    }

    /* ==== address ==== */
    & address {
      display: block flow;

      .unit {
        display: block flex;
        gap: 36px;
        font-size: 18px;
        line-height: 2;

        @media only screen and (width <= 768px) {
          display: block grid;
          gap: 0.1vw;
          padding-inline-end: 15.6vw;
          font-size: calc((100 / 390) * 15 * 1vw);

          & a[href^='tel:'] {
            color: var(--main);
            text-decoration: underline;
          }
        }

        & a[href^='mailto:'] {
          color: var(--main);
          text-decoration: underline;
        }
      }
    }
  }
}

/* =====================
  calendar
===================== */
.calendar {
  padding-block: 120px 113px;
  background: var(--back);

  @media only screen and (width <= 768px) {
    padding-block: 16.2vw 16.3vw;
  }

  /* ==== contents ==== */
  .contents {
    .c-sub-title {
      margin-block-end: -1px;
    }

    /* ==== p ==== */
    & p {
      font-size: 20px;
      line-height: 2;

      @media only screen and (width <= 768px) {
        font-size: calc((100 / 390) * 16 * 1vw);
        line-height: 1.8;
      }
    }

    /* ==== month ==== */
    .month {
      padding-block: 40px;
      padding-inline: 40px;
      margin-block-start: 55px;
      background: white;

      @media only screen and (width <= 768px) {
        padding-block: calc((100 / 390) * 40 * 1vw) calc((100 / 390) * 20 * 1vw);
        padding-inline: calc((100 / 390) * 16 * 1vw);
        margin-block-start: 8.6vw;
      }
    }

    /* ==== picture ==== */
    .picture {
      display: block flow;
      margin-inline: auto;
    }
  }
}

/* =====================
  fee
===================== */
.fee {
  padding-block: 120px 119px;

  @media only screen and (width <= 768px) {
    padding-block: 14.4vw 14.2vw;
  }

  .c-head {
    margin-block-end: 55px;

    @media only screen and (width <= 768px) {
      margin-block-end: 8.1vw;
    }
  }

  /* ==== contents ==== */
  .contents {
    /* ==== picture ==== */
    .picture {
      display: block flow;
      margin-inline: auto;
    }
  }
}