@charset "UTF-8";
/* =====================
  main
===================== */
.main {
  min-block-size: 100svh;
}

/* =====================
  component - head
===================== */
.c-head {
  font-size: 20px;
  padding-block-end: 1px;
  font-family: 'ヒラギノ角ゴ Pro W6', 'Hiragino Kaku Gothic Pro', '游ゴシック', 'Yu Gothic', yugothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', meiryo,
    'ＭＳ ゴシック', sans-serif;
  border-block-end: 2px dotted #0086d3;
  @media only screen and (width <= 768px) {
    padding-block-end: 0.8vw;
    border-block-end: calc((100 / 750) * 4 * 1vw) dotted #0086d3;
    font-size: calc((100 / 750) * 30 * 1vw);
  }

  & + p {
    font-feature-settings: 'palt';
    font-size: 14px;
    margin-block-start: 34px;
    letter-spacing: 0.03em;
    line-height: 2.142857142857143;
    @media only screen and (width <= 768px) {
      margin-block-start: 5vw;
      line-height: 1.7692307692307692;
      font-size: calc((100 / 750) * 26 * 1vw);
    }
  }
}

/* =====================
  component - list
===================== */
.c-list {
  list-style-type: none;
  display: block grid;
  gap: 20.6px;
  margin-block-start: 35px;
  @media only screen and (width <= 768px) {
    margin-block-start: calc((100 / 750) * 60 * 1vw);
    gap: 5.4vw;
  }

  /* ==== h3 ==== */
  & h3 {
    color: #333333;
    font-weight: bold;
    font-family: '游ゴシック', 'Yu Gothic', yugothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', meiryo, 'ＭＳ ゴシック', sans-serif;
    font-size: 15px;
    position: relative;
    padding-inline-start: 15px;
    border-block-end: 1px solid #e5e5e5;
    padding-block-end: 2px;
    @media only screen and (width <= 768px) {
      font-size: calc((100 / 750) * 30 * 1vw);
      border-block-end: calc((100 / 750) * 2 * 1vw) solid #e5e5e5;
      padding-block-end: 0;
      padding-inline-start: 3.4vw;
    }

    &::before {
      content: '';
      position: absolute;
      border-radius: calc(infinity * 1px);
      inset-inline-start: 0;
      inset-block-start: 8px;
      background: #1c4c68;
      aspect-ratio: 1 / 1;
      inline-size: 10px;
    }
    @media only screen and (width <= 768px) {
      &::before {
        inline-size: calc((100 / 750) * 20 * 1vw);
        inset-block-start: 2vw;
      }
    }
  }

  /* ==== p ==== */
  & p {
    font-size: 14px;
    color: #111111;
    line-height: 1.7;
    font-feature-settings: 'palt';
    margin-block-start: 12px;
    padding-inline: 9px;
    letter-spacing: 0.03em;
    @media only screen and (width <= 768px) {
      margin-block-start: 1.7vw;
      padding-inline: 2vw;
      font-size: calc((100 / 750) * 24 * 1vw);
      line-height: 1.6666666666666667;
    }
  }
}

/* =====================
  component - box
===================== */
.c-box {
  border: 1px solid #0068b7;
  color: #333333;
  font-weight: bold;
  background-color: white;
  padding: 12px 16px;
  margin-block-start: 44px;
  font-size: 15px;
  line-height: 1.7;
  border-radius: 4px;
  padding-block: 20px;
  @media only screen and (width <= 768px) {
    border-radius: 0;
    padding: 3.6vw 4vw;
    font-size: calc((100 / 750) * 30 * 1vw);
    margin-block-start: calc((100 / 750) * 47 * 1vw);
  }
}

/* =====================
  contents-mv
===================== */
.contents-mv .wrapper {
  background-image: url('../../contents/insurance/img/mv.png');
}

/* =====================
  insurance-intro
===================== */
.insurance-intro {
  padding-block: 45px 24px;
  position: relative;
  z-index: 2;
  overflow: clip;
  @media only screen and (width <= 768px) {
    padding-block: 19vw 8vw;
  }

  /* ==== inner ==== */
  .inner {
    display: block grid;
    position: relative;
    @media only screen and (width <= 768px) {
      padding-inline: calc((100 / 750) * 42 * 1vw) calc((100 / 750) * 0 * 1vw);
    }

    &::after {
      content: '';
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      background-image: url('../../contents/insurance/img/01.png');
      inline-size: 651px;
      block-size: 450px;
      position: absolute;
      inset-inline-end: -90px;
      inset-block-start: 74px;
      pointer-events: none;
    }
    @media only screen and (width <= 768px) {
      &::after {
        background-image: url('../../contents/insurance/img/01_sp.png');
        inline-size: calc((100 / 750) * 670 * 1vw);
        block-size: calc((100 / 750) * 460 * 1vw);
        position: unset;
        inset: unset;
        display: block flow;
        margin-block-start: 4.6vw;
        margin-inline: auto;
        translate: -3vw 0;
      }
    }
  }

  & hgroup {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    display: block grid;
    gap: 7px;
    @media only screen and (width <= 768px) {
      gap: calc((100 / 750) * 4 * 1vw);
    }

    & span {
      text-transform: uppercase;
      line-height: 1;
      margin-block: calc((1em - 1lh) / 2);
      font-feature-settings: 'palt';
      color: #0068b7;
      translate: -2px 0px;
      font-size: 56px;
      letter-spacing: 0.03em;
      font-weight: normal;
      font-family: 'AlternateGotNo3D-Regular';
      @media only screen and (width <= 768px) {
        font-size: calc((100 / 750) * 84.98 * 1vw);
        letter-spacing: 0.03em;
        translate: -2px 0px;
      }
    }

    & h1 {
      display: block flex;
      align-items: center;
      gap: 16px;
      font-size: 13px;
      @media only screen and (width <= 768px) {
        gap: calc((100 / 750) * 21 * 1vw);
        font-size: calc((100 / 750) * 24 * 1vw);
      }

      &::before {
        content: '';
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../../contents/insurance/img/dot.png');
        inline-size: 48px;
        block-size: 8px;
      }
      @media only screen and (width <= 768px) {
        &::before {
          background-image: url('../../contents/insurance/img/dot_sp.png');
          inline-size: calc((100 / 750) * 73 * 1vw);
          block-size: calc((100 / 750) * 13 * 1vw);
        }
      }
    }
  }

  .catch {
    letter-spacing: 0.03em;
    font-feature-settings: 'palt';
    font-size: 26px;
    line-height: 1.3846153846153846;
    font-weight: bold;
    margin-block-start: 47px;
    @media only screen and (width <= 768px) {
      font-size: calc((100 / 750) * 36 * 1vw);
      line-height: 1.5555555555555556;
      margin-block-start: 7.9vw;
      translate: -0.3vw 0;
    }
  }

  .body {
    letter-spacing: 0.03em;
    font-feature-settings: 'palt';
    line-height: 2.142857142857143;
    font-size: 14px;
    margin-block-start: 27px;
    max-inline-size: 500px;
    @media only screen and (width <= 768px) {
      font-size: calc((100 / 750) * 26 * 1vw);
      margin-block-start: 3.7vw;
      padding-inline-end: 5vw;
      max-inline-size: 100%;
      line-height: 1.7692307692307692;
    }
  }
}

/* =====================
  insurance-service
===================== */
.insurance-service {
  padding-block: 91px 92px;
  @media only screen and (width <= 768px) {
    padding-block: 4.6vw 11.4vw;
  }

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

  .c-head + p {
    margin-block-start: 23px;
    margin-block-end: 47px;
    @media only screen and (width <= 768px) {
      margin-block-start: 4.8vw;
      margin-block-end: 10vw;
    }
  }

  /* ==== unit ==== */
  .unit {
    position: relative;
    z-index: 2;
    border-radius: 4px;
    max-inline-size: 1000px;
    margin-inline: auto;
    border: 1px solid #0068b7;
    padding-block: 27px 50px;
    padding-inline: 29px;
    background: white;
    @media only screen and (width <= 768px) {
      border-radius: calc((100 / 750) * 8 * 1vw);
      padding-block: 4.5vw 12.9vw;
      padding-inline: 5vw 5vw;
    }

    & + .unit {
      margin-block-start: 30px;
      @media only screen and (width <= 768px) {
        margin-block-start: calc((100 / 750) * 49 * 1vw);
      }
    }

    /* ==== h4 ==== */
    & h4 {
      border-radius: 4px;
      display: block grid;
      place-content: center;
      color: white;
      background: #0068b7;
      font-family: 'ヒラギノ角ゴ Pro W6', 'Hiragino Kaku Gothic Pro', '游ゴシック', 'Yu Gothic', yugothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ',
        meiryo, 'ＭＳ ゴシック', sans-serif;
      font-size: 18px;
      font-weight: 600;
      padding-block: 5px;
      @media only screen and (width <= 768px) {
        border-radius: calc((100 / 750) * 4 * 1vw);
        font-size: calc((100 / 750) * 27 * 1vw);
        padding-block: 2vw;
        line-height: 1.3333333333333333;
      }
    }

    /* ==== ul ==== */
    & ul {
      list-style-type: none;
      margin-block-start: 40px;
      padding-inline: 50px 0px;
      display: block flex;
      flex-wrap: wrap;
      gap: 17px 130px;
      @media only screen and (width <= 768px) {
        padding-inline: 0vw;
        gap: 4.7vw 6.6vw;
        margin-block-start: 8.4vw;
      }

      /* ==== li ==== */
      & li {
        position: relative;
        font-weight: bold;
        font-size: 18px;
        letter-spacing: 0.03em;
        font-feature-settings: 'palt';
        padding-inline-start: 42px;
        line-height: 2;
        @media only screen and (width <= 768px) {
          font-size: calc((100 / 750) * 25 * 1vw);
          padding-inline-start: 7.8vw;
          line-height: 2.076923076923077;
        }

        &::before {
          content: '';
          position: absolute;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../../contents/insurance/img/checkbox.png');
          aspect-ratio: 1 / 1;
          inline-size: 30px;
          inset-inline-start: 0;
          inset-block-start: 2px;
        }
        @media only screen and (width <= 768px) {
          &::before {
            inset-block-start: 0.5vw;
            background-image: url('../../contents/insurance/img/checkbox_sp.png');
            inline-size: calc((100 / 750) * 45 * 1vw);
          }
        }

        @media (width > 768px) {
          &:nth-child(2) {
            translate: 29px 0;
          }
          &:nth-child(3) {
            translate: 29px 0;
          }
        }

        @media only screen and (width <= 768px) {
          &:nth-child(1) {
            order: 1;
          }
          &:nth-child(2) {
            order: 3;
          }
          &:nth-child(3) {
            order: 5;
          }
          &:nth-child(4) {
            order: 2;
          }
          &:nth-child(5) {
            order: 4;
            white-space: nowrap;
          }
        }
      }
    }

    /* ==== item ==== */
    .item {
      position: relative;

      & + .item {
        translate: 20px 0;
        @media only screen and (width <= 768px) {
          translate: 0;
        }

        &::before {
          content: '';
          position: absolute;
          background: #0068b7;
          block-size: 121px;
          inline-size: 1px;
          inset-inline-start: -120px;
          inset-block-start: 5px;
        }
        @media only screen and (width <= 768px) {
          &::before {
            block-size: calc((100 / 750) * 2 * 1vw);
            inline-size: calc((100 / 750) * 590 * 1vw);
            position: absolute;
            inset-inline-start: 50%;
            translate: -48% 0;
            margin-inline: auto;
            inset-block-start: -6.6vw;
          }
        }
      }
    }

    /* ==== tel ==== */
    .tel {
      display: block flex;
      margin-inline: auto;
      justify-content: center;
      inline-size: fit-content;
      gap: 0 199px;
      margin-block-start: 48px;
      @media only screen and (width <= 768px) {
        gap: 13vw;
        margin-block-start: 10.2vw;
        display: block grid;
        translate: -1.5vw 0;
      }

      & hgroup {
        display: block grid;
        gap: 1px;
        @media only screen and (width <= 768px) {
          gap: 0;
        }

        & p {
          letter-spacing: 0.03em;
          font-feature-settings: 'palt';
          font-size: 12px;
          color: #888888;
          font-weight: bold;
          @media only screen and (width <= 768px) {
            font-size: calc((100 / 750) * 21 * 1vw);
          }
        }

        & h5 {
          letter-spacing: 0.03em;
          font-feature-settings: 'palt';
          color: #0068b7;
          font-weight: bold;
          margin-block: calc((1em - 1lh) / 2);
          font-size: 20px;
          @media only screen and (width <= 768px) {
            font-size: calc((100 / 750) * 30 * 1vw);
          }
        }
      }

      .number {
        display: block grid;
        margin-block-start: 16px;
        gap: 11px;
        @media only screen and (width <= 768px) {
          margin-block-start: 3.6vw;
          gap: 1.6vw;
        }

        .label {
          display: inline-grid;
          line-height: 1;
          padding-inline: 8.8px;
          padding-block: 5.3px;
          place-content: center;
          color: white;
          letter-spacing: 0.03em;
          font-size: 12px;
          inline-size: fit-content;
          font-weight: bold;
          font-feature-settings: 'palt';
          background: #57c53a;
          @media only screen and (width <= 768px) {
            font-size: calc((100 / 750) * 18 * 1vw);
            padding-inline: 2vw;
            padding-block: 1.2vw;
          }
        }

        & a[href^='tel:'] {
          @media only screen and (width <= 768px) {
            translate: 0.8vw 0;
            cursor: pointer;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
            tap-highlight-color: rgba(0, 0, 0, 0.1);
            &:active {
              background: rgba(0, 0, 0, 0.1);
            }
          }
        }

        & img {
          @media only screen and (width <= 768px) {
            inline-size: calc((100 / 750) * 402 * 1vw);
          }
        }
      }
    }
  }
}

/* =====================
  insurance-policy
===================== */
.insurance-policy {
  /* ==== inner ==== */
  .inner {
    padding-inline: 31px;
    @media only screen and (width <= 768px) {
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }
  }

  /* ==== c-box ==== */
  .c-box {
    text-align: center;
    font-weight: bold;
  }
}

/* =====================
  insurance-fd
===================== */
.insurance-fd {
  padding-block: 91px 0;
  @media only screen and (width <= 768px) {
    padding-block: 14.9vw 0;
  }

  .c-head + p {
    margin-block-end: -5px;
  }

  /* ==== inner ==== */
  .inner {
    padding-inline: 31px;
    @media only screen and (width <= 768px) {
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }
  }

  .c-list {
    @media only screen and (width <= 768px) {
      margin-block-start: calc((100 / 750) * 78 * 1vw);
    }
  }

  /* ==== c-box ==== */
  .c-box {
    @media only screen and (width <= 768px) {
      padding: 4.7vw 3vw;
    }
    & dl {
      display: block flex;
      margin-inline: auto;
      inline-size: fit-content;
      line-height: 1.6;
      font-size: 15px;
      @media only screen and (width <= 768px) {
        font-size: calc((100 / 750) * 25 * 1vw);
      }
    }
  }
}

/* =====================
  insurance-date
===================== */
.insurance-date {
  padding-block: 32px 107px;

  @media only screen and (width <= 768px) {
    padding-block: 7vw 22.3vw;
  }
  /* ==== inner ==== */
  .inner {
    padding-inline: 31px;
    @media only screen and (width <= 768px) {
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }
  }

  & p {
    line-height: 1.7;
    font-size: 14px;
    letter-spacing: 0.03em;
    font-feature-settings: 'palt';
    @media only screen and (width <= 768px) {
      font-size: calc((100 / 750) * 24 * 1vw);
      line-height: 1.6;
    }
  }
}