@charset "UTF-8";

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

  @media (width <=768px) {
    padding-block: 0 var(--nudge-9);
  }

  /* ==== .u-inner ==== */
  .u-inner {
    position: relative;
    display: block grid;
    grid-template-columns: 469px 470px;
    gap: 40px 180px;

    @media (width > 768px) {
      padding-inline: 80px;
    }

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
      gap: 0;
    }
  }

  /* ==== catch-text ==== */
  .catch-text {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    margin-block-start: 34px;
    translate: 2px 0;

    @media (width <=768px) {
      position: absolute;
      inset-block-start: 37vw;
      inset-inline-end: 5vw;
      z-index: 2;
      inline-size: 46vw;
      mix-blend-mode: exclusion;
      translate: 0;
    }
  }

  /* ==== catch-img ==== */
  .catch-img {
    grid-row: 2 / 3;
    grid-column: 1 / 2;

    @media (width > 768px) {
      position: relative;
      inset-block-start: -100px;
      inset-inline-start: -160px;
      inline-size: 700px;
      max-inline-size: 700px;
      block-size: 450px;
    }

    @media (width <=768px) {
      z-index: 1;
      margin-block-start: 12vw;
    }
  }

  /* ==== catch ==== */
  .catch {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    margin-block-start: 174px;
    font-size: 40px;
    line-height: 1.9;

    @media (width <=768px) {
      inline-size: fit-content;
      margin-block-start: 10vw;
      margin-inline: auto;
      font-size: calc((100 / 390) * 20 * 1vw);
      text-align: center;

      br {
        display: none;
      }
    }

    strong {
      font-weight: 500;
      color: #648fe2;
    }
  }

  /* ==== body ==== */
  .body {
    display: block grid;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    gap: 28px;

    @media (width <=768px) {
      gap: 6vw;
      margin-block-start: 4vw;
      font-size: calc((100 / 390) * 15 * 1vw);
      text-align: center;
    }

    p {
      line-height: 1.9;
      letter-spacing: 0.16px;

      @media (width <=768px) {
        letter-spacing: calc((100 / 390) * 0.16 * 1vw);
      }
    }
  }

  /* ==== section ==== */
  section[data-id='1'] {
    display: block grid;
    grid-column: 1 / 3;
    gap: 10px 37px;
    align-items: center;
    padding-block: 79px;
    padding-inline: 80px;
    margin-block-start: 50px;
    background: #fdfdfd;
    border-radius: 30px;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
    }

    @media (width <=768px) {
      gap: 0;
      padding-block: var(--nudge-4) var(--nudge-8);
      padding-inline: calc((100 / 390) * 16 * 1vw);
      margin-block-start: var(--nudge-6);
      border-radius: calc((100 / 390) * 15 * 1vw);
    }

    .text[data-id='1'] {
      grid-row: 1 / 2;
      grid-column: 1 / 2;
      font-size: 22px;
      font-weight: 700;
      line-height: 1.9;

      @media (width <=768px) {
        inline-size: 100%;
        font-size: calc((100 / 390) * 20 * 1vw);
        text-align: center;
      }
    }

    .text[data-id='2'] {
      grid-row: 1 / 2;
      grid-column: 2 / 3;
      padding-inline-start: 35px;
      font-weight: 500;
      line-height: 1.9;
      letter-spacing: 0.16px;
      border-inline-start: 1px solid #c9c9c9;

      @media (width <=768px) {
        padding-inline-start: 0;
        margin-block-start: var(--nudge-4);
        font-size: calc((100 / 390) * 15 * 1vw);
        letter-spacing: calc((100 / 390) * 0.16 * 1vw);
        border-inline-start: none;
      }
    }

    /* ==== list ==== */
    .list {
      display: grid;
      grid-template-columns: repeat(3, auto);
      grid-column: 1 / 3;
      gap: 36px;
      justify-content: center;
      margin-block-start: 70px;

      @media (width <=768px) {
        display: block flex;
        flex-direction: column;
        gap: 0;
        align-items: center;
        justify-content: center;
        inline-size: 100%;
        margin-block-start: var(--nudge-5);
        margin-inline: auto;
      }

      h2 {
        align-self: flex-start;
        font-size: 31px;
        font-weight: 600;
        text-align: center;

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

      ul {
        inline-size: fit-content;
        padding-inline-start: 13px;
        margin-inline: auto;

        @media (width <=768px) {
          padding-inline-start: 0;
        }

        li {
          position: relative;
          display: block grid;
          padding-inline-start: 14px;

          @media (width <=768px) {
            inline-size: 100%;
            padding-inline-start: calc((100 / 390) * 13 * 1vw);
            font-size: calc((100 / 390) * 14 * 1vw);
          }

          &::before {
            position: absolute;
            inset-block-start: 46%;
            inset-inline-start: 0;
            inline-size: 4px;
            aspect-ratio: 1 / 1;
            content: '';
            background: currentcolor;
            border-radius: calc(infinity * 1px);

            @media (width <=768px) {
              inline-size: calc((100 / 390) * 3 * 1vw);
            }
          }
        }
      }

      .unit {
        position: relative;
        display: block grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        gap: 0;
        align-items: center;
        inline-size: 277px;
        block-size: 296px;
        padding-block: 65px 87px;
        padding-inline-end: 68px;

        @media (width <=768px) {
          grid-row: unset;
          gap: 4vw;
          align-content: center;
          inline-size: 79vw;
          block-size: 63vw;
          padding-block: 0 16vw;
          padding-inline-end: 0;
        }

        &::before {
          position: absolute;
          inset-block: 0;
          inset-inline: 0;
          inline-size: 277px;
          aspect-ratio: 277 / 296;
          pointer-events: none;
          content: '';
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;

          @media (width <=768px) {
            inset-block: 0;
            inset-inline: 0;
            inline-size: calc((100 / 390) * 240 * 1vw);
            margin-inline: auto;
            rotate: 0 0 1 90deg;
          }
        }
      }

      .unit[data-id='1'] {
        &::before {
          background-image: url('../img/business/list/01.svg');
        }

        h2 {
          color: #82ad37;
        }
      }

      .unit[data-id='2'] {
        &::before {
          background-image: url('../img/business/list/02.svg');
        }

        h2 {
          color: #35b98c;
        }
      }

      .unit[data-id='3'] {
        &::before {
          background-image: url('../img/business/list/03.svg');
        }

        h2 {
          color: #39bdca;
        }
      }
    }
  }

  /* ==== section ==== */
  section[data-id='2'] {
    display: block grid;
    grid-column: 1 / 3;
    gap: 77px;
    margin-block-start: 41px;

    @media (width <=768px) {
      gap: var(--nudge-6);
      margin-block-start: var(--nudge-6);
    }

    /* ==== unit ==== */
    .unit {
      display: block grid;

      @media (width <=768px) {
        gap: calc((100 / 390) * 10 * 1vw);
      }

      .decoration {
        padding-block-end: 4px;
        font-size: 20px;
        font-weight: 400;
        text-align: right;
        letter-spacing: 1.2px;
        border-block-end: 1px solid #c9c9c9;

        @media (width <=768px) {
          padding-block-end: 1vw;
          font-size: calc((100 / 390) * 13 * 1vw);
          letter-spacing: calc((100 / 390) * 1.2 * 1vw);
        }

        span {
          position: relative;
          inset-inline-end: -3px;

          @media (width <=768px) {
            inset-inline-end: 0;
          }
        }
      }

      h2 {
        margin-block-start: 23px;
        font-size: 30px;
        font-weight: 600;

        @media (width <=768px) {
          margin-block-start: 0;
          font-size: calc((100 / 390) * 20 * 1vw);
        }
      }

      img {
        inline-size: 100%;
        block-size: auto;
        margin-block-start: 31px;

        @media (width <=768px) {
          margin-block-start: calc((100 / 390) * 10 * 1vw);
        }
      }

      p {
        margin-block-start: 16px;
        line-height: 1.9;

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

/* =====================
  financial-planning
===================== */
.financial-planning {
  padding-block: 161px;
  margin-block-end: 53px;
  background: white;

  @media (width <=768px) {
    padding-block: var(--nudge-9);
    margin-block-end: var(--nudge-4);
  }

  /* ==== u-inner ==== */
  .u-inner {
    position: relative;
    display: block grid;
    gap: 0;
    align-items: flex-start;

    @media (width <=768px) {
      display: block flex;
      flex-direction: column;
    }

    @media (width > 768px) {
      padding-inline: 80px;
    }
  }

  /* ==== u-hgroup ==== */
  .u-hgroup {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
  }

  /* ==== catch ==== */
  .catch {
    display: block grid;
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    gap: 16px;
    padding-block: 9px;
    padding-inline-start: 20px;
    margin-block-start: 97px;
    border-inline-start: 7px solid #eee;

    @media (width <=768px) {
      gap: var(--nudge-2);
      inline-size: 100%;
      padding-block: var(--nudge-1);
      padding-inline-start: var(--nudge-2);
      margin-block-start: var(--nudge-6);
      border-inline-start-width: calc((100 / 390) * 5 * 1vw);
    }

    span {
      margin-block: calc((1em - 1lh) / 2);
    }

    span:last-child {
      font-size: 42px;
      color: var(--primary);

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

  /* ==== body ==== */
  .body {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    padding-inline-start: 30px;
    margin-block-start: -32px;
    line-height: 1.9;

    @media (width <=768px) {
      padding-inline-start: calc((100 / 390) * 16 * 1vw);
      margin-block-start: var(--nudge-2);
      font-size: calc((100 / 390) * 15 * 1vw);
    }
  }

  /* ==== picture ==== */
  .picture {
    grid-row: 2 / 4;
    grid-column: 2 / 3;
    place-self: flex-end center;
    margin-block-start: 140px;
    translate: 13px 3px;

    @media (width <=768px) {
      position: absolute;
      inset-block-start: 32vw;
      inset-inline-end: 9vw;
      inline-size: calc((100 / 390) * 70 * 1vw);
      margin-block-start: 0;
      translate: -1vw 0;
    }
  }

  /* ==== ul ==== */
  ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-row: 4 / 5;
    grid-column: 1 / 3;
    gap: 20px;
    padding-inline: 39px;
    margin-block-start: 92px;

    @media (width <=768px) {
      display: block flex;
      flex-wrap: wrap;
      gap: var(--nudge-1);
      justify-content: center;
      inline-size: 92%;
      padding-inline: 0;
      margin-block-start: var(--nudge-4);
      margin-inline: auto;
    }

    li {
      display: block grid;
      grid-template-rows: subgrid;
      grid-row: span 3;
      gap: 21px;
      place-content: center;
      align-items: center;
      padding-block: 42px 0;
      background: var(--bg);
      border-radius: 10px;

      @media (width <=768px) {
        gap: var(--nudge-2);
        align-items: center;
        min-inline-size: calc(100% / 2 - var(--nudge-1));
        padding-block: 6vw;
        border-radius: calc((100 / 390) * 5 * 1vw);
      }

      img {
        margin-inline: auto;

        @media (width <=768px) {
          max-inline-size: calc((100 / 390) * 60 * 1vw);
          max-block-size: calc((100 / 390) * 60 * 1vw);
        }
      }

      p {
        margin-block: calc((1em - 1lh) / 2);
        font-size: 17px;
        font-weight: 600;
        line-height: 1.4;
        color: var(--gold);
        text-align: center;

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

  /* ==== table ==== */
  table {
    grid-row: 5 / 6;
    grid-column: 1 / 3;
    inline-size: 100%;
    margin-block-start: 91px;
    table-layout: fixed;

    @media (width > 768px) {
      max-inline-size: calc(100% - 80px);
      margin-inline: auto;
    }

    @media (width <=768px) {
      margin-block-start: var(--nudge-4);
    }

    th,
    td {
      padding-block: 14px;
      padding-inline: 18px;
      font-size: 15px;
      border: 1px solid #c3c4c7;

      @media (width <=768px) {
        padding-block: 3vw;
        padding-inline: calc((100 / 390) * 9 * 1vw);
        font-size: calc((100 / 390) * 13 * 1vw);
        vertical-align: middle;
        word-break: auto-phrase;

        a[href^='tel:'] {
          text-decoration: underline;
        }
      }
    }

    th {
      inline-size: 200px;
      font-weight: 700;
      background: #eee;

      @media (width <=768px) {
        inline-size: 20vw;
      }
    }
  }

  /* ==== anchor ==== */
  .anchor {
    position: relative;
    display: block flex;
    grid-row: 6 / 7;
    grid-column: 1 / 3;
    gap: 6px;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    padding-block: 19px;
    margin-block-start: 90px;
    font-size: 20px;
    text-align: center;
    background: #fdfdfd;
    border: 1px solid #c3c4c7;
    border-radius: 10px;

    @media (width > 768px) {
      max-inline-size: calc(100% - 80px);
      margin-inline: auto;
    }

    @media (width <=768px) {
      gap: var(--nudge-1);
      padding-block: var(--nudge-2);
      margin-block-start: var(--nudge-3);
      font-size: calc((100 / 390) * 15 * 1vw);
      text-align: left;
      border-radius: calc((100 / 390) * 5 * 1vw);

      p {
        line-height: 2;
      }
    }

    .arrow {
      z-index: 2;
      display: block grid;
      align-items: center;
      justify-content: center;
      inline-size: 50px;
      aspect-ratio: 1 / 1;
      pointer-events: none;
      border: 1px solid var(--gold);
      border-radius: 50%;
      translate: -11px 0;
      transition: background 250ms ease 0s;

      @media (width <=768px) {
        inset-inline-end: calc((100 / 390) * 12 * 1vw);
        inline-size: calc((100 / 390) * 30 * 1vw);
      }

      &::before {
        inline-size: 18px;
        aspect-ratio: 18 / 12;
        content: '';
        background-color: var(--gold);
        mask-image: var(--icon-arrow);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        transition:
          background 250ms ease 0s,
          translate 250ms ease 0s;

        @media (width <=768px) {
          @media (width <=768px) {
            inline-size: calc((100 / 390) * 10 * 1vw);
          }
        }
      }
    }

    a {
      color: var(--primary);
      text-decoration-line: underline;
      text-decoration-thickness: 1px;
      text-decoration-style: solid;
      text-decoration-color: currentcolor;
      text-underline-offset: 2px;

      &::before {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        content: '';
      }
    }
  }
}