/*********************************************/
/* メインビジュアル */
/*********************************************/
.mainvisual {
  @media (width >= 768px) {
    background: url(/lp/urikake/assets/images/top/mv_bg.jpg) no-repeat center bottom / calc(1920/1440*100vw) auto var(--bgc-white);
  }
  @media (width >= 1440px) {
    background-size: 1920px auto;
  }
  @media (width < 768px) {
    background: url(/lp/urikake/assets/images/top/mv_bg_sp.jpg) no-repeat center bottom / cover var(--bgc-white);
  }

  .inner {
    margin-inline: auto;
    max-width: 144rem;
    padding-block: 5.6rem 9.6rem;
    padding-inline: clamp(var(--container-gutter), 120/1440*100vw, 12rem);
    @media (width < 768px) {
      padding-block: 1.9rem 30rem;
      padding-inline: var(--container-gutter);
    }
  }

  .title {
    margin-block-end: 2rem;
    width: 64.4rem;
    @media (width < 768px) {
      margin-block-end: 1.4rem;
      margin-inline: auto;
      width: 35.8rem;
    }
  }
  
  .desc {
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: calc(49/26);
    @media (width < 768px) {
      font-size: 1.8rem;
      line-height: calc(32/18);
      text-align: center;
    }
  }
  
  .badge {
    display: flex;
    align-items: center;
    @media (width >= 768px) {
      justify-content: center;
      gap: 2rem;
    }
    @media (width < 768px) {
      gap: .7rem;
    }

    li {
      width: 17rem;
      @media (width < 768px) {
        width: 11.2rem;
      }
      
      img {
        filter: drop-shadow(.3rem .3rem .8rem color-mix(in srgb, #000 20%, transparent));
        @media (width < 768px) {
          filter: drop-shadow(.2rem .2rem .6rem color-mix(in srgb, #000 20%, transparent));
        }
      }
    }
  }

  .contact-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    margin-block-start: 3.6rem;
    width: fit-content;
    @media (width < 768px) {
      align-items: flex-start;
      gap: 2.2rem;
      margin-block-start: 1.4rem;
    }
  }

  .contact {
    .heading {
      margin-block-end: .6rem;
      color: var(--fc-green);
      font-size: 1.8rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-align: center;
      @media (width < 768px) {
        margin-block-end: .2rem;
      }

      &::before ,
      &::after {
        content: "|";
        display: inline-block;
        margin-inline: 1.2rem;
        scale: 1.3;
        rotate: -25deg;
        @media (width < 768px) {
          margin-inline: .8rem;
          scale: 1.1;
        }
      }
      &::after {
        rotate: 25deg;
      }
    }

    .buttons {
      display: flex;
      align-items: center;
      gap: 1.3rem;
      @media (width < 768px) {
        gap: .9rem;
      }
    }
  }

  /* animation  
  ----------------*/
  @media (width >= 768px) {
    .contact-wrap {
      translate: 0 5rem;
      opacity: 0;
      transition: .6s .6s ease-in-out;
      transition-property: translate, opacity;
    }
    &.is-inview {
      .contact-wrap {
        translate: 0 0;
        opacity: 1;
      }
    }
  }
}




/*********************************************/
/* りそなの売掛保証とは？ */
/*********************************************/
#about {
  @media (width >= 768px) {
    background:
      url(/lp/urikake/assets/images/top/about_bg_01.svg) no-repeat right calc(50% + 68.3rem) top -30.3rem / 81.3rem auto,
      url(/lp/urikake/assets/images/top/about_bg_02.svg) no-repeat left calc(50% + 30.3rem) bottom -25.7rem / 144.8rem auto,
      var(--bgc-white);
    }
  @media (width < 768px) {
    background:
      url(/lp/urikake/assets/images/top/about_bg_01_sp.svg) no-repeat right calc(50% + 22.5rem) top -42rem / 55.5rem auto,
      url(/lp/urikake/assets/images/top/about_bg_02_sp.svg) no-repeat left calc(50% + 4.6rem) bottom -29.2rem / 106rem auto,
      var(--bgc-white);
  }

  .image-01 {
    margin-block-start: 9.8rem;
    text-align: center;
    @media (width < 768px) {
      margin-block-start: 7.2rem;
      margin-inline: calc(50% - 50vw);
    }

    img {
      width: 92.8rem;
      @media (width < 768px) {
        width: 40.6rem;
      } 
    }
  }
}




/*********************************************/
/* こんなお悩みありませんか？ */
/*********************************************/
#problem {

  .probrem-list {
    display: grid;
    @media (width >= 768px) {
      grid-template-columns: repeat(4, 1fr);
      gap: 3.2rem;
      margin-block-end: 8rem;
    }
    @media (width < 768px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 2.1rem;
      margin-block-end: 3.6rem;
    }

    li {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      gap: 0;
    }

    .text {
      position: relative;
      align-content: center;
      margin-block-end: calc(9.3rem / -2);
      margin-inline: 1.8rem;
      padding: .25em;
      min-height: 9.3rem;
      border-radius: 0.6rem;
      background-color: var(--bgc-green);
      color: var(--fc-white);
      font-size: 1.8rem;
      font-weight: 600;
      letter-spacing: 2px;
      line-height: calc(24/18);
      text-align: center;
      @media (width < 768px) {
        margin-inline: 1rem;
        min-height: 11rem;
        border-radius: 1rem;
      }

      &::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        translate: -50% -.2rem;
        background-color: var(--bgc-green);
        aspect-ratio: 1/1;
        width: 2.1rem;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        pointer-events: none;
      }
    }

    .image {
      display: grid;
      place-content: center;
      padding-block: 7.8rem 4rem;
      border-radius: 2rem;
      background-color: var(--bgc-white);
      @media (width < 768px) {
        padding-block: 7rem 2.2rem;
      }

      img {
        width: 12rem;
        @media (width < 768px) {
          width: 9.3rem;
        }
      }
    }
  }

  /* animation  
  ----------------*/
  .probrem-effect-group {
    @media (width >= 768px) {

      .probrem-list li ,
      .probrem-list + .c-lead-01 {
        translate: 0 5rem;
        opacity: 0;
        transition: .6s ease-in-out;
        transition-property: translate, opacity;
      }
      .probrem-list {
        li {
          transition-delay: calc(.3s * var(--i));
          &:nth-child(1) { --i: 1; }
          &:nth-child(2) { --i: 2; }
          &:nth-child(3) { --i: 3; }
          &:nth-child(4) { --i: 4; }
        }
        + .c-lead-01 {
          transition-delay: 1.8s;
        }
      }
      
    }
    &.is-inview {
      .probrem-list li ,
      .probrem-list + .c-lead-01 {
        translate: 0 0;
        opacity: 1;
      }
    }
  }
}




/*********************************************/
/* 導入の4つのメリット */
/*********************************************/
#merit {
  @media (width >= 768px) {
    background:
      url(/lp/urikake/assets/images/top/merit_bg_01.svg) no-repeat right calc(50% + 90.9rem) top -21.1rem / 160.5rem auto,
      url(/lp/urikake/assets/images/top/merit_bg_02.svg) no-repeat left calc(50% + 27.8rem) bottom -29.2rem / 171.0rem auto,
      var(--bgc-green);
    }
  @media (width < 768px) {
    background:
      url(/lp/urikake/assets/images/top/merit_bg_01_sp.svg) no-repeat right calc(50% + 31.4rem) top -9.1rem / 122.8rem auto,
      url(/lp/urikake/assets/images/top/merit_bg_02_sp.svg) no-repeat left calc(50% + -0.8rem) bottom -40.7rem / 158.3rem auto,
      var(--bgc-green);
  }

  .merit-list {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    @media (width < 768px) {
      gap: 2rem;
    }
  }

  .merit-item {
    position: relative;
    flex: 1;
    @media (width >= 768px) {
      width: 102rem;
    }
    @media (width < 768px) {
      width: 100%;
    }

    .bg {
      position: absolute;
      inset-block: 0;
      z-index: 1;
      width: 120rem;
      border-radius: 1.8rem;
      background-color: var(--bgc-white);
      overflow: hidden;
      pointer-events: none;
      @media (width < 768px) {
        width: 100vw;
        border-radius: 2.4rem;
      }

      /* 図形 */
      &::before {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        background-image: url(/lp/urikake/assets/images/top/merit_bg_03.svg);
        background-position: left bottom;
        background-repeat: no-repeat;
        background-size: 90.6rem auto;
        background-position: left -13rem bottom -1rem;
        @media (width < 768px) {
          background-image: url(/lp/urikake/assets/images/top/merit_bg_03_sp.svg);
          background-size: 88.1rem auto;
          background-position: left -34.1rem bottom -1rem;
        }
      }
    }

    .contents {
      position: relative;
      z-index: 2;
      @media (width >= 768px) {
        display: flex;
        gap: 3.2rem;
      }
      @media (width < 768px) {
        padding: 3.6rem 1.2rem 3rem;
      }
    }
    
    .main-col {
      @media (width >= 768px) {
        padding-block: 5.6rem 7.6rem;
      }
    }

    .heading {
      display: flex;
      gap: 2rem;
      flex-direction: column;
      margin-block-end: 1.6rem;
      font-weight: 700;

      .sub {
        display: flex;
        align-items: center;
        gap: 1rem;
        color: var(--fc-green);
        &::before {
          content: "";
          aspect-ratio: 1/1;
          width: 2.2rem;
          background: url(/lp/urikake/assets/images/common/icn_check_01.svg) no-repeat center / contain;
        }
      }
      .main {
        font-size: 2.8rem;
        letter-spacing: 0.1em;
        @media (width < 768px) {
          font-size: 2.4rem;
        }
      }
    }

    .image-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      @media (width < 768px) {
        margin-block-start: 2rem;
      }

      .image {
        flex-shrink: 0;
        @media (width >= 768px) {
          width: 26.5rem;
        }
        @media (width < 768px) {
          width: 15.4rem;
        }
      }

      .text {
        color: var(--fc-green);
        font-size: 2.6rem;
        font-weight: 700;
        letter-spacing: 2px;
        line-height: calc(40/26);
        text-align: center;
        @media (width >= 768px) {
          min-width: 20rem;
        }
        @media (width < 768px) {
          flex-grow: 1;
          font-size: 1.8rem;
        }
      }
    }

    &:nth-child(odd) {
      @media (width >= 768px) {
        align-self: flex-start;
        padding-inline-start: 10rem;
      }
      .bg {
        right: 0;
        rotate: y 180deg;
      }
      .contents {
        @media (width < 768px) {
          padding-inline-end: 3.4rem;
        }
      }
    }

    &:nth-child(even) {
      @media (width >= 768px) {
        align-self: flex-end;
      }
      .bg {
        left: 0;
      }
      .contents {
        @media (width >= 768px) {
          flex-direction: row-reverse;
          justify-content: flex-end;
        }
        @media (width < 768px) {
          padding-inline-start: 3.4rem;
        }
      }
      .image-wrap {
        flex-direction: row-reverse;
        @media (width >= 768px) {
          flex-basis: 54rem;
          justify-content: flex-start;
        }
      }
    }

    &.--01 {
      @media (width >= 768px) {
        .main-col {
          padding-block-end: 5rem;
        }
        .image-wrap {
          align-self: flex-end;
          padding-block-end: 5.6rem;
          .text {
            translate: -1.2rem -2.8rem;
            img {
              width: 19.3rem;
            }
          }
        }
      }
      @media (width < 768px) {
        .image-wrap {
          .text {
            img {
              width: 13.5rem;
            }
          }
        }
      }
    }

    &.--03 {
      @media (width >= 768px) {
        .image-wrap {
          flex-grow: 1;
          .text {
            flex-grow: 1;
          }
        }
      }
    }


    /* animation  
    ----------------*/
    @media (width >= 768px) {
      &,
      .contents {
        opacity: 0;
        transition: .6s;
        transition-property: translate, opacity;
      }
      & {
        translate: calc(var(--animation-duration) * 5rem) 0;
      }
      .contents {
        translate: calc(var(--animation-duration) * 5rem) 0;
        transition-delay: .5s;
      }
      &:nth-child(odd) {
        --animation-duration: -1;
      }
      &:nth-child(even) {
        --animation-duration: 1;
      }
      &.is-inview {
        &,
        .contents {
          translate: 0 0;
          opacity: 1;
        }
      }
    }
  }
}




/*********************************************/
/* サービスの特徴 */
/*********************************************/
#feature {
  
  .feature-list {
    display: grid;
    @media (width >= 768px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 3.2rem;
      margin-block-start: 4.5rem;
    }
    @media (width < 768px) {
      grid-template-columns: repeat(1, 1fr);
      gap: 1.2rem;
      margin-block-start: 3rem;
    }

    > .item {
      position: relative;
      border-radius: 1.8rem;
      background-color: var(--bgc-white);
      @media (width >= 768px) {
        padding: 4.4rem 19rem 2.8rem 4.8rem;
        min-height: 28rem;
      }
      @media (width < 768px) {
        padding: 3.2rem 3.6rem 3.6rem;
        min-height: 18.2rem;
      }

      .heading {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-block-end: 3.2rem;
        font-size: 2.8rem;
        font-weight: 700;
        line-height: calc(40/28);
        @media (width < 768px) {
          margin-block-end: 1.5rem;
          margin-inline-end: -1rem;
          font-size: 2.4rem;
          line-height: calc(34/24);
        }
        &::before {
          content: "";
          flex-shrink: 0;
          aspect-ratio: 1/1;
          width: 2.2rem;
          background: url(/lp/urikake/assets/images/common/icn_check_01.svg) no-repeat center / contain;
          translate: 0 0.4em;
          @media (width < 768px) {
            translate: 0 0.2em;
          }
        }
      }

      .desc-image {
        @media (width >= 768px) {
          display: contents;
        }
        @media (width < 768px) {
          position: relative;
        }
      }

      .desc {
        position: relative;
        z-index: 2;
        @media (width >= 768px) {
          margin-inline-start: 1.5rem;
        }
        @media (width < 768px) {
          width: 22rem;
        }
      }

      .image {
        position: absolute;
        top: 3.6rem;
        right: -2.2rem;
        z-index: 1;
        width: 20.6rem;
        @media (width < 768px) {
          top: 50%;
          right: -5.6rem;
          width: 12rem;
          translate: 0 -47%;
        }
      }

    }
  }
}




/*********************************************/
/* 他社比較 */
/*********************************************/
#compare {

  .compare-table-wrap {
    margin-block-end: 8rem;
    margin-inline: auto;
    @media (width >= 768px) {
      max-width: 98rem;
    }
    @media (width < 768px) {
      overflow: auto;
      margin-block-end: 3.6rem;
      padding-block-end: .8rem;
    }
  }

  .compare-table {
    --accent-border-width: .8rem;
    --cell-border-width: .2rem;
    --cell-block-padding: 1.8rem;
    display: grid;
    grid-template-columns: 21.4rem 18.3rem repeat(3, 1fr);
    gap: 0 .6rem;
    font-weight: 700;
    @media (width < 768px) {
      --cell-block-padding: 1.2rem;
      grid-template-columns: auto 16.3rem repeat(3, 14.2rem);
    }

    tr,
    tbody,
    thead,
    tfoot {
      display: grid;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
    }

    th,
    td {
      display: block;

      &.--risona {
        position: relative;
        &::after {
          content: "";
          position: absolute;
          inset: 0;
          border-left: var(--accent-border-width) solid var(--bgc-orange-dark);
          border-right: var(--accent-border-width) solid var(--bgc-orange-dark);
          pointer-events: none;
        }
      }
    }

    thead {
      th {
        align-self: flex-end;
        background-color: #5a5a5a;
        padding-block: 1rem;
        color: var(--fc-white);
        font-size: 1.6rem;
        letter-spacing: 0.1em;
        line-height: calc(20/16);
        text-align: center;

        &.--risona {
          position: relative;
          background-color: var(--bgc-green);
          padding-block: calc(var(--accent-border-width) + .8rem) .8rem;
          font-size: 2rem;
          @media (width < 768px) {
            font-size: 1.8rem;
          }

          &::after {
            border-top: var(--accent-border-width) solid var(--bgc-orange-dark);
          }
        }

        &:empty {
          visibility: hidden;
        }
      }
    }

    tbody {
      th, td {
        place-content: center;
        letter-spacing: 0.1em;
        padding-block: var(--cell-block-padding);
        @media (width < 768px) {
          min-height: 6rem;
        }
      }
      th {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: .8rem;
        margin-bottom: var(--cell-border-width);
        padding-inline: 1.4rem;
        background-color: var(--bgc-green);
        color: var(--bgc-white);
        font-size: 2rem;
        line-height: calc(26/20);
        text-align: left;
        @media (width < 768px) {
          gap: .3rem;
          padding-inline: 1rem;
          font-size: 1.4rem;
          white-space: nowrap;
        }

        .rating {
          flex-shrink: 0;
          aspect-ratio: 1/1;
          width: 3.6rem;
          background: no-repeat center / contain;
          @media (width < 768px) {
            width: 2.3rem;
          }

          &.--01 { background-image: url(/lp/urikake/assets/images/common/icn_rating_01.svg); }
          &.--02 { background-image: url(/lp/urikake/assets/images/common/icn_rating_02.svg); }
        }
      }

      td {
        align-items: center;
        border-bottom: var(--cell-border-width) solid var(--bdc-gray);
        background-color: var(--bgc-white);
        text-align: center;
        font-size: 1.8rem;
        line-height: 1.2;
        @media (width < 768px) {
          font-size: 1.6rem;
        }

        em {
          color: var(--fc-green);
        }

        small {
          font-size: calc(12/16*1em);
        }

        &.--risona {
          padding-inline: var(--accent-border-width);
          &::after {
            inset-block-end: calc(var(--cell-border-width) * -1);
          }
        }
      }
      
      tr {
        &:last-child {
          th {
            margin-block-end: 0;
          }
          td {
            padding-block-end: calc(var(--accent-border-width) + var(--cell-block-padding));
            border-bottom: none;
            &.--risona {
              &::after {
                inset-block-end: 0;
                border-bottom: var(--accent-border-width) solid var(--bgc-orange-dark);
              }
            }
          }
        }
      }
    }
  }
}




/*********************************************/
/* 利用されたお客さまの事例 */
/*********************************************/
#case {
  padding-block-end: .1rem!important;

  .case-box {
    background-color: var(--bgc-white);
    @media (width >= 768px) {
      display: grid;
      grid-template-columns: 32.3rem 1fr;
      gap: 0 3.6rem;
      margin-inline-start: 6rem;
      padding: 5.2rem 6rem;
      border-radius: 2rem;
    }
    @media (width < 768px) {
      display: flex;
      flex-direction: column;
      padding: 3.2rem 3.6rem 2.4rem;
      border-radius: 2.4rem;
    }

    .column-left,
    .column-right {
      @media (width >= 768px) {
        display: flex;
        flex-direction: column;
      }
      @media (width < 768px) {
        display: contents;
      }
    }

    .column-left {
      @media (width >= 768px) {
        gap: 6rem;
      }
    }
    .column-right {
      @media (width >= 768px) {
        gap: 3rem;
      }
    }

    .person {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      @media (width >= 768px) {
        margin-inline-start: -12rem;
      }
      @media (width < 768px) {
        order: 1;
        margin-inline: -11rem -2.2rem;
        margin-block-end: 2.6rem;;
      }

      .image {
        img {
          border-radius: 2rem;
        }
      }

      .name {
        font-size: 1.8rem;
        letter-spacing: 0.1em;
      }

      .name-wrap {
        margin-block-start: -2.8rem;
        padding: 2.2rem 2.6rem;
        border-radius: 1rem 0 1rem 1rem;
        background: 
          linear-gradient(
            -138deg,
            transparent -100%,
            rgba(242, 255, 139, 0.7) -60%,
            #0ca26c 50%,
            #00735a 120%
          );
        color: var(--fc-white);
        font-weight: 700;
        line-height: calc(28/16);
      }
    }

    .body {
      @media (width < 768px) {
        order: 2;
        margin-block-end: 4rem;
      }

      > :first-child {
        margin-block-start: 0!important;
      }

      > :last-child {
        margin-block-end: 0!important;
      }

      .c-heading-02 {
        margin-block: 3.2rem;
        @media (width < 768px) {
          margin-block: 2rem;
        }

        + h4 {
          margin-block-start: 0;
        }
      }
      
      h4 {
        margin-block: 3.2rem 1rem;
        color: var(--fc-green);
        font-size: 1.8rem;
        font-weight: 700;
        line-height: calc(30/18);
      }
    }

    .sub-images {
      display: flex;
      flex-direction: column;
      gap: 3rem;
      @media (width < 768px) {
        order: 3;
        margin-block-end: 2rem;
      }
      img {
        border-radius: 2rem;
      }

      figcaption {
        margin-block-start: 1rem;
        font-size: 1.4rem;
        line-height: calc(24/14);
      }
    }

    .button {
      @media (width < 768px) {
        order: 4;
        margin-inline: -2.4rem;
      }
      .c-button-02 {
        width: 100%;
      }
    }

    &.--excerpt {
      .body {
        height: 28rem;
        mask-image:
          linear-gradient(to top, black, transparent),
          linear-gradient(black, black);
        mask-size: 100% 5rem, cover;
        mask-position: bottom, center;
        mask-repeat: no-repeat;
        mask-composite: exclude;
        @media (width < 768px) {
          height: 16rem;
        }
      }
      .sub-images {
        display: none;
      }
    }

    &.--full {
      /* max-height: 90svh;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: none;
      &::-webkit-scrollbar {
        display: none;
      } */
      .button {
        margin-block-start: auto;
      }
    }
  }
}




/*********************************************/
/* 専門家のコメント */
/*********************************************/
#comment {

  /*次の要素がはみ出した分調整*/
  .c-heading-01 {
    @media (width >= 768px) {
      margin-block-end: 6rem;
    }
  }

  .comment-box {
    display: flex;
    align-items: flex-start;
    border-radius: 2rem;
    background-color: var(--bgc-white);
    @media (width >= 768px) {
      gap: 5.6rem;
      padding-inline: 9.6rem 2rem;
    }
    @media (width < 768px) {
      gap: 8.4rem;
      padding-block: 3.6rem 3rem;
      padding-inline: 3.6rem;
      border-radius: 2.4rem;
      flex-direction: column;
    }

    .body {
      @media (width >= 768px) {
        padding-block: 6.4rem 8.4rem;
      }

      .c-heading-02 {
        margin-block-end: 2.8rem;
        @media (width < 768px) {
          margin-block-end: 2rem;
        }
      }
    }
    
    .person {
      display: grid;
      align-items: flex-end;
      @media (width >= 768px) {
        translate: 0 -1.7rem;
      }

      > * {
        grid-area: 1 / 1 / -1 / -1;
      }
      
      .image {
        @media (width >= 768px) {
          width: 40.4rem;
          translate: 4rem -2.3rem;
        }
        @media (width < 768px) {
          width: 39rem;
          translate: 0rem -6.4rem;
        }
        img {
          border-radius: 2rem;
        }
      }

      .profile {
        z-index: 2;
        border-left: .2rem solid var(--bgc-green-dark);
        padding: 1rem 7.2rem .3rem 3rem;
        width: fit-content;
        background-color: var(--bgc-white);
        @media (width < 768px) {
          padding: 2rem 5.6rem 1.6rem 3rem;
          margin-inline: -1.6rem;
        }

        .sub-heading {
          margin-block-end: 0.3rem;
          color: var(--fc-green);
          @media (width < 768px) {
            margin-block-end: 1.2rem;
          }
        }

        .name-wrap {
          font-size: 1.4rem;
          line-height: 1.5;
        }

        .name {
          display: block;
          margin-block-start: 1rem;
          font-size: 1.8rem;
          font-weight: 700;
        }
      }

    }
    

  }
}




/*********************************************/
/* 導入フロー */
/*********************************************/
#flow {
  min-height: 100vh;
  @media (width >= 768px) {
    background:
      url(/lp/urikake/assets/images/top/flow_bg_01.svg) no-repeat left calc(50% + 61.9rem) top -22.9rem / 200rem auto,
      url(/lp/urikake/assets/images/top/flow_bg_02.svg) no-repeat right calc(50% + 65.8rem) bottom -51.8rem / 105.2rem auto,
      var(--bgc-white)
    }
  @media (width < 768px) {
    background:
      url(/lp/urikake/assets/images/top/flow_bg_01_sp.svg) no-repeat left calc(50% + 29.5rem) top -35.4rem / 224.4rem auto,
      url(/lp/urikake/assets/images/top/flow_bg_02_sp.svg) no-repeat right calc(50% - 14.1rem) bottom -38.6rem / 135rem auto,
      var(--bgc-white);
  }

  .flow-steps {
    @media (width >= 768px) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 3rem;
    }
    @media (width < 768px) {
      display: flex;
      flex-direction: column;
      gap: 6rem;
    }
  }

  .flow-step {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    @media (width >= 768px) {
    }

    .heading {
      margin-block-end: -1.8rem;
      background-color: var(--bgc-green);
      color: var(--fc-white);
      font-size: 1.8rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      line-height: 4.7rem;
      text-align: center;
      @media (width < 768px) {
        margin-block-end: -2.8rem;
        line-height: 5.7rem;
      }

      .num {
        margin-inline: 0.125em .25em;
        font-size: 3rem;
        vertical-align: bottom;
      }
    }

    .sub-heading {
      display: flex;
      align-items: flex-start;
      gap: 1.2rem;
      margin-block-end: 1rem;
      font-size: 1.8rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      line-height: 2.5rem;

      .num {
        display: grid;
        place-content: center;
        aspect-ratio: 1/1;
        width: 2.5rem;
        border-radius: .3rem;
        background-color: var(--fc-base);
        color: var(--fc-white);
        letter-spacing: 0;
        line-height: 1;
      }
    }

    > .item {
      position: relative;
      border-radius: 0.5rem;
      border: .2rem solid var(--bdc-gray);
      padding: 2.8rem 11rem 2rem 4.8rem;
      min-height: 15.1rem;
      background-color: var(--bgc-white);
      @media (width < 768px) {
        padding: 2.8rem 11rem 2.8rem 3.4rem;
      }

      .image {
        position: absolute;
        top: 50%;
        right: 2.2rem;
        translate: 0 -50%;
        width: 8.2rem;
        @media (width < 768px) {
          right: 1.2rem;
        }
      }

      &:not(:last-child) {
        &::after {
          content: "";
          position: absolute;
          top: 100%;
          left: 50%;
          translate: -50% 1.4rem;
          display: block;
          background: url(/lp/urikake/assets/images/common/icn_arrow_01.svg) center / contain no-repeat;
          aspect-ratio: 2/1;
          width: 3.4rem;
          @media (width < 768px) {
            width: 4.8rem;
            transform: scaleY(0.7);
            translate: -50% 1rem;
          }
        }
      }
      
    }
  }
}




/*********************************************/
/* よくあるご質問 */
/*********************************************/
#faq {
  .faq-pulldown {
    max-width: 92.8rem;
    margin-inline: auto;
    border-radius: 1.2rem;
    background-color: var(--bgc-white);
    overflow: hidden;

    + .faq-pulldown {
      margin-block-start: .8rem;
    }

    .heading,
    .body .inner {
      display: flex;
      align-items: flex-start;
      gap: 0rem;
      padding-block: 1.6rem;
      padding-inline: 1rem;
      line-height: 4rem;
      @media (width < 768px) {
        line-height: 3.2rem;
      }
      
      .label {
        flex-shrink: 0;
        min-width: 6rem;
        color: var(--fc-green);
        font-size: 2.3rem;
        font-weight: 700;
        letter-spacing: 0;
        text-align: center;
        @media (width < 768px) {
          min-width: 5rem;
          font-size: 2rem;
        }
      }
    }

    .heading {
      position: relative;
      padding-inline-end: 9rem;
      font-size: 1.8rem;
      font-weight: 700;
      cursor: pointer;
      @media (width < 768px) {
        padding-inline-end: 5rem;
        padding-block: 1.8rem;
      }

      .text {
        letter-spacing: 0.1em;
      }

      .icon {
        position: absolute;
        top: 50%;
        right: 4rem;
        width: 1.8rem;
        aspect-ratio: 1 / 1;
        translate: 0 -50%;
        color: var(--fc-green);
        @media (width < 768px) {
          right: 1.6rem;
          width: 2rem;
        }

        &::before,
        &::after {
          content: "";
          position: absolute;
          top: 50%;
          inset-inline: 0;
          height: 0.3rem;
          background-color: currentColor;
          transition: rotate .3s ease-in-out;
        }

        &::before {
          rotate: -90deg;
        }

        &::after {
          rotate: -180deg;
        }
      }
    }

    .body {
      font-size: 1.6rem;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        inset-inline: 0;
        height: 0.1rem;
        background-color: var(--bdc-gray);
      }
      
      .inner {
        padding-inline-end: 6rem;
        @media (width < 768px) {
          padding-block: 1.8rem;
          padding-inline-end: 3rem;
        }
      }
    }

    &.is-open {
      .heading {
        .icon {
          &::before ,
          &::after {
            rotate: 0deg;
          }
        }
      }
    }
  }
}




/*********************************************/
/* ご留意事項 */
/*********************************************/
#attention {
  .attention-pulldown-wrap {
    margin-inline: auto;
    max-width: 92.8rem;
    border-radius: 1.2rem;
    background-color: var(--bgc-white);
  }

  .attention-pulldown {

    .heading,
    .body {
      position: relative;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        inset-inline: 3.6rem;
        height: 0.1rem;
        @media (width < 768px) {
          inset-inline: 1.6rem;
        }
      }
    }

    .heading,
    .body .inner {
      display: flex;
      align-items: flex-start;
      gap: 0rem;
      padding-block: 1.6rem;
      padding-inline: 4rem;
      line-height: 4rem;
      @media (width < 768px) {
        padding-inline: 2rem;
        line-height: 3.2rem;
      }
    }

    .heading {
      position: relative;
      padding-inline-end: 9rem;
      color: var(--fc-green);
      font-size: 1.8rem;
      font-weight: 700;
      cursor: pointer;
      @media (width < 768px) {
        padding-inline-end: 5rem;
        padding-block: 1.8rem;
      }

      &::before {
        background-color: var(--bdc-gray);
      }

      .text {
        letter-spacing: 0.1em;
      }

      .icon {
        position: absolute;
        top: 50%;
        right: 4rem;
        width: 1.8rem;
        aspect-ratio: 1 / 1;
        translate: 0 -50%;
        color: var(--fc-green);
        @media (width < 768px) {
          right: 1.6rem;
          width: 2rem;
        }

        &::before,
        &::after {
          content: "";
          position: absolute;
          top: 50%;
          inset-inline: 0;
          height: 0.3rem;
          background-color: currentColor;
          transition: rotate .3s ease-in-out;
        }

        &::before {
          rotate: -90deg;
        }

        &::after {
          rotate: -180deg;
        }
      }
    }

    .body {
      font-size: 1.6rem;

      &::before {
        background-color: var(--bdc-gray-light);
      }
      
      .inner {
        padding-inline-end: 6rem;
        @media (width < 768px) {
          padding-block: 1.8rem;
          padding-inline-end: 3rem;
        }
      }
    }

    &.is-open {
      .heading {
        .icon {
          &::before ,
          &::after {
            rotate: 0deg;
          }
        }
      }
    }

    &:first-child {
      .heading {
        &::before {
          display: none;
        }
      }
    }
  }

}