@charset "UTF-8";
/* -----------------------------------------------------------
	.p-mainvisual
----------------------------------------------------------- */
.p-mainvisual {
  background: url(../images/lp/bg-mainvisual.avif) center bottom no-repeat;
  background-size: cover;
  text-align: center;
  @media (min-width: 1025px) {
    height: calc(100vh + 104px);
  }
  @media (max-width: 767px) {
    background: none;
  }
  .img {
    aspect-ratio: 1/0.834;
    height: 68.7vh;
    margin: 0 auto;
  }
  .pagenav {
    margin-top: 9.6vh;
    @media (max-width: 767px) {
      margin-top: 0;
      background: #D4D1BF;
    }
    .list-pagenav {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: 1fr;
      @media (max-width: 767px) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
      }
      .item-pagenav {
        @media (min-width: 1025px) {
          height: 72px;
        }
        a {
          display: inline grid;
          grid-template-columns: 1fr auto 1fr;
          column-gap: 1em;
          align-items: center;
          inline-size: min(100%, 400px);
          border-top: 1px solid #FFF;
          background: linear-gradient(95deg, #FFF 0%, rgba(255, 255, 255, 0.00) 101.13%);
          backdrop-filter: blur(5px);
          height: 100%;
          font-size: 1.125rem;
          line-height: 1;
          font-weight: 500;
          letter-spacing: 0.08em;
          padding: 24px 16px;
          @media (min-width: 768px) and (max-width: 1024px) {
            padding: 16px 8px;
            font-size: 1rem;
          }
          @media (max-width: 767px) {
            column-gap: 0.5em;
            font-size: 1rem;
            letter-spacing: 0;
            padding: 16px 12px;
          }
          &::before {
            content: '';
          }
          &::after {
            content: '';
            justify-self: end;
            inline-size: 0.5em;
            aspect-ratio: 1;
            border-block-start: 1px solid #867E68;
            border-inline-end: 1px solid #867E68;
            rotate: 135deg;
          }
          @media (hover: hover) {
            transition: 0.3s;
            &::after {
              transition: 0.3s;
            }
            &:hover {
              opacity: 0.6;
              &::after {
                translate: 0 4px;
              }
            }
          }
        }
      }
    }
  }
}

/* -----------------------------------------------------------
	.p-overview
----------------------------------------------------------- */
.p-overview {
  background: #D4D1BF;
  padding: 56px 0 160px;
  @media (max-width: 767px) {
    padding: 56px 0 80px;
  }
  .wrap-overview {
    .txt-intro {
      text-align: center;
      font-weight: 500;
      line-height: 1.8;
      letter-spacing: 0.08em;
      font-size: 1.125rem;
      margin-top: 40px;
      word-break: break-word;
      overflow-wrap: anywhere;
      @media (max-width: 1024px) {
        text-align: left;
        br {
          display: none;
        }
      }
    }
    .overview-contents {
      padding: 80px;
      margin-top: 64px;
      @media (min-width: 768px) and (max-width: 1024px) {
        padding: 64px 40px;
      }
      @media (max-width: 767px) {
        padding: 40px 24px;
        margin-top: 40px;
      }
      h3 {
        font-weight: 500;
        line-height: 1.8;
        font-size: 1.875rem;
        text-align: center;
        @media (max-width: 767px) {
          font-size: 1.5rem;
        }
        span {
          background:linear-gradient(transparent 60%, var(--color-marker) 60%);
        }
      }
      .txt-lead {
        text-align: center;
        font-size: 1.125rem;
        font-weight: 500;
        line-height: 1.8;
        margin: 8px auto 40px;
        @media (max-width: 1024px) {
          text-align-last: left;
          br {
            display: none;
          }
        }
        @media (max-width: 767px) {
          font-size: 1rem;
          margin-bottom: 0;
        }
      }
      .c-table-basic {
        tr {
          th {
            @media (min-width: 1025px) {
              width: 28.6%;
            }
          }
          td {
            @media (min-width: 1025px) {
              width: 71.4%;
            }
            .txt {
              font-size: 1.125rem;
              font-weight: 500;
              @media (max-width: 767px) {
                font-size: 1rem;
              }
              em {
                font-size: 1.125rem;
                font-family: var(--font-sans);
                font-weight: 400;
              }
            }
            .txt-caution {
              font-size: 87.5%;
              font-weight: 400;
              padding-bottom: 8px;
            }
            .list-caution {
              display: flex;
              flex-direction: column;
              gap:4px;
              opacity: 0.8;
              margin-top: 24px;
              .item-caution {
                position: relative;
                font-size: 87.5%;
                line-height: 1.4;
                padding-left: 1em;
                &::before {
                  content: '※';
                  position: absolute;
                  top: 0;
                  left: 0;
                }
              }
              &.mini {
                gap:8px;
                .item-caution {
                  font-size: 75%;
                  a {
                    text-decoration: underline;
                    @media (hover: hover) {
                      transition: 0.3s;
                      &:hover {
                        opacity: 0.6;
                      }
                    }
                  }
                }
              }
            }
            dl {
              dt {
                font-size: 1.25rem;
                font-weight: 500;
              }
              dd {
                font-weight: 500;
                em {
                  font-family: var(--font-sans);
                  font-size: 1.125rem;
                  font-weight: 400;
                }
                span {
                  display: inline-block;
                  font-weight: 400;
                }
              }
              &:not(:first-child) {
                margin-top: 16px;
              }
            }
          }
        }
      }
      h4 {
        font-size: 1.625rem;
        line-height: 1.4;
        margin: 80px 0 16px;
        @media (max-width: 767px) {
          margin: 40px 0 8px;
          font-size: 1.5em;
        }
      }
      .list-requirements {
        margin: 24px 0 80px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        @media (max-width: 767px) {
          grid-template-columns: 1fr;
          grid-template-rows: repeat(4, auto);
          grid-column-gap: 0;
          margin-bottom: 24px;
        }
        .item-requirements {
          padding: 32px 40px;
          border-top: 1px solid var(--color-border);
          border-left: 1px solid var(--color-border);
          @media (min-width: 768px) and (max-width: 1024px) {
            padding: 32px 24px;
          }
          @media (max-width: 767px) {
            padding: 24px;
          }
          h5 {
            margin-bottom: 8px;
            font-size: 1.25rem;
          }
          .c-list-basic {
            li {
              span {
                font-size: 87.5%;
              }
            }
          }
        }
      }
      .list-target {
        margin-top: 40px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        @media (max-width: 767px) {
          margin-top: 8px;
          grid-template-columns: 1fr;
          grid-template-rows: repeat(2, auto);
        }
        >li {
          position: relative;
          &::before {
            content: '';
            background-color: var(--color-border);
            width: 100%;
            height: 1px;
            position: absolute;
            top: 24px;
            left: 0;
          }
          &::after {
            content: '';
            background-color: var(--color-border);
            width: 1px;
            height: 100%;
            position: absolute;
            top: 0;
            left: 15px;
          }
          @media (max-width: 767px) {
            &::before {
              top: 20px;
            }
            &::after {
              left: 21px;
            }
          }
          h5 {
            display: inline-flex;
            align-items: center;
            gap:16px;
            background: #DFDDCF;
            position: relative;
            z-index: 1;
            padding: 8px 16px 8px 0;
            @media (max-width: 767px) {
              gap:8px;
              padding: 8px 8px 0;
            }
            span {
              display: inline-block;
              &.cicle {
                width: 32px;
                aspect-ratio: 1/1;
                @media (max-width: 767px) {
                  width: 24px;
                }
              }
              &.ng {
                width: 24px;
                margin-left: 5px;
                @media (max-width: 767px) {
                  width: 18px;
                }
              }
              &.title {
                font-size: 1.375rem;
                line-height: 1.4;
                @media (min-width: 768px) and (max-width: 1024px) {
                  font-size: 1.25rem;
                }
                @media (max-width: 767px) {
                  font-size: 1.25rem;
                }
              }
            }
          }
          &.item-target {
            .inner-list-target {
              padding-left: 56px;
              padding-right: 40px;
              margin-top: 24px;
              @media (min-width: 768px) and (max-width: 1024px) {
                padding-right: 16px;
                margin-top: 16px;
              }
              @media (max-width: 767px) {
                padding-left: 40px;
                padding-right: 0;
                margin-top: 16px;
              }
              dl {
                margin-bottom: 32px;
                @media (max-width: 767px) {
                  margin-bottom: 24px;
                }
                dt {
                  font-size: 1.25rem;
                  @media (min-width: 768px) and (max-width: 1024px) {
                    font-size: 1.125rem;
                    font-weight: 600;
                  }
                  @media (max-width: 767px) {
                    font-size: 1.125rem;
                  }
                }
                dd {
                  ul {
                    list-style-position: outside;
                    padding-left: 1em;
                    li {
                      list-style-type: decimal;
                      line-height: 1.5;
                    }
                  }
                }
              }
              .list-caution {
                opacity: 0.8;
                display: flex;
                flex-direction: column;
                gap:4px;
                @media (max-width: 767px) {
                  margin-bottom: 32px;
                }
                .item-caution {
                  display: flex;
                  gap:8px;
                  font-size: 75%;
                  line-height: 1.5;
                }
              }
            }
          }
          &.item-nontarget {
            .list-nontarget {
              display: flex;
              flex-direction: column;
              gap:16px;
              padding-left: 56px;
              margin-top: 24px;
              @media (max-width: 767px) {
                padding-left: 40px;
                margin-top: 16px;
                gap:8px;
              }
              .item-nontarget {
                line-height: 1.5;
                display: flex;
                gap:8px;
                .ng {
                  width: 15px;
                  @media (max-width: 767px) {
                    width: 12px;
                  }
                }
                .txt {
                  width: calc(100% - 23px);
                  padding-top: 3px;
                }
                .small {
                  font-size: 87.5%;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* -----------------------------------------------------------
	.p-models
----------------------------------------------------------- */
.p-models {
  padding: 160px 0;
  @media (max-width: 767px) {
    padding: 80px 0;
  }
  .wrap-models {
    .txt-intro {
      text-align: center;
      font-weight: 500;
      line-height: 1.8;
      letter-spacing: 0.08em;
      font-size: 1.125rem;
      margin-top: 40px;
      @media (max-width: 767px) {
        text-align: left;
        letter-spacing: 0;
        br {
          display: none;
          letter-spacing: 0;
          line-height: 1.5;
        }
      }
    }
    .img-subsidyamount {
      display: block;
      margin: 40px auto;
      @media (max-width: 767px) {
        margin: 24px auto;
        width: 80%;
      }
    }
    .list-caution {
      max-width: 1120px;
      margin-inline: auto;
      opacity: 0.8;
      display: flex;
      flex-direction: column;
      gap:4px;
      .item-caution {
        display: flex;
        gap:8px;
        font-size: 75%;
        line-height: 1.5;
      }
    }
    .p-models__example {
      margin-top: 64px;
      .p-models__example-title {
        text-align: center;
        margin-bottom: 40px;
        @media (min-width: 768px) and (max-width: 1024px) {
          margin-bottom: 24px;
        }
        @media (max-width: 767px) {
          margin-bottom: 24px;
        }
        span {
          display: inline-block;
          position: relative;
          font-size: 2rem;
          line-height: 1;
          letter-spacing: 0.08em;
          @media (max-width: 767px) {
            font-size: 1.6rem;
          }
          &::before,&::after {
            content: '';
            position: absolute;
            top: calc(50% - 1px);
            width: 80px;
            height: 2px;
            background: linear-gradient(90deg, #906E3E 0%, rgba(144, 110, 62, 0.00) 100%);
          }
          &::before {
            left: -104px;
            transform: scale(-1, 1);
          }
          &::after {
            right: -104px;
          }
          @media (max-width: 767px) {
            &::before,&::after {
              width: 40px;
            }
            &::before {
              left: -64px;
            }
            &::after {
              right: -64px;
            }
          }
        }
      }
      .p-models__example-frame {
        width: 100%;
        @media (max-width: 767px) {
          display: flex;
          flex-direction: column;
        }
        .p-models__example-title {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: 1fr;
          margin-bottom: 0;
          @media (max-width: 767px) {
            display: contents;
          }
          h4 {
            color: #fff;
            text-align: center;
            font-size: 1.25rem;
            line-height: 1.2;
            font-weight: 500;
            padding: 13px;
            border-radius: 24px 0 0 0;
            background: var(--color-accent);
            em {
              font-size: 1.5rem;
              font-weight: 700;
              display: block;
            }
            &:nth-child(2) {
              background: var(--color-sub);
              border-radius: 0 24px 0 0;
              border-left: 2px dashed rgba(255,255,255,0.5);
            }
            @media (max-width: 767px) {
              &:nth-child(1) {
                order:1;
                border-radius: 24px 24px 0 0;
              }
              &:nth-child(2) {
                order:3;
                border-left: none;
                border-radius: 24px 24px 0 0;
              }
            }
          }
        }
        .p-models__example-detail {
          background-color: #fff;
          border-radius: 0 0 24px 24px;
          @media (min-width: 768px) {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            padding: 0 0 64px;
          }
          @media (min-width: 768px) and (max-width: 1024px) {
            padding-bottom: 40px;
          }
          @media (max-width: 767px) {
            display: contents;
            border-radius: 0;
          }
          .p-models__example-detail-item {
            padding: 48px 64px 0;
            @media (min-width: 768px) and (max-width: 1024px) {
              padding: 32px 24px 0;
            }
            &:nth-child(2) {
              border-left: 2px dashed var(--color-border);
            }
            @media (max-width: 767px) {
              background-color: #fff;
              padding: 32px 24px;
              &:nth-child(1) {
                order:2;
                border-radius: 0 0 24px 24px;
                margin-bottom: 24px;
              }
              &:nth-child(2) {
                order:4;
                border-left: none;
                border-radius: 0 0 24px 24px;
              }
            }
            .box-outline {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              grid-template-rows: repeat(2, 1fr);
              margin-bottom: 40px;
              gap:45px;
              @media (min-width: 768px) and (max-width: 1024px) {
                gap:16px;
              }
              @media (max-width: 767px) {
                grid-template-rows: repeat(2, auto);
                grid-column-gap: 24px;
                grid-row-gap: 0px;
              }
              .logo {
                grid-area: 1 / 1 / 2 / 2;
              }
              .img-models__example {
                grid-area: 1 / 2 / 3 / 3;
              }
              .seriesname {
                grid-area: 2 / 1 / 3 / 2;
                align-self: flex-end;
                display: flex;
                flex-direction: column;
                gap:2px;
                @media (min-width: 768px) and (max-width: 1024px) {
                  gap:0;
                }
                @media (max-width: 767px) {
                  gap:0;
                }
              }
            }
            .box-price {
              display: flex;
              align-items: center;
              gap:32px;
              @media (min-width: 768px) and (max-width: 1024px) {
                gap:16px;
                align-items: flex-start;
              }
              @media (max-width: 767px) {
                display: grid;
                grid-template-columns: 88px 1fr;
                grid-template-rows: 1fr;
                grid-column-gap: 8px;
                grid-row-gap: 0px;
                align-items: start;
              }
              .eyecatch-price {
                width: 160px;
                @media (min-width: 768px) and (max-width: 1024px) {
                  width: 100px;
                }
                @media (max-width: 767px) {
                  width: 100%;
                }
              }
              .box-price-inner {
                width: calc(100% - 192px);
                @media (min-width: 768px) and (max-width: 1024px) {
                  width: calc(100% - 116px);
                }
                @media (max-width: 767px) {
                  width: 100%;
                }
                h5 {
                  font-weight: 700;
                  font-size: 1.125rem;
                  margin-bottom: 16px;
                  line-height: 1;
                  @media (min-width: 768px) and (max-width: 1024px) {
                    font-size: 1rem;
                    line-height: 1.2;
                  }
                  @media (max-width: 767px) {
                    line-height: 1.2;
                    margin-bottom: 8px;
                  }
                  &.pickup {
                    max-width: 223px;
                  }
                }
                .type {
                  display: flex;
                  gap:6px;
                  margin-bottom: 4px;
                  li {
                    display: inline-block;
                    background: #727171;
                    color: #fff;
                    text-align: center;
                    padding: 2px 8px;
                    line-height: 1;
                    font-size: 93.8%;
                  }
                }
                .txt {
                  letter-spacing: 0.04em;
                  line-height: 1.5;
                  @media (min-width: 768px) and (max-width: 1024px) {
                    letter-spacing: 0;
                    font-size: 92.5%;
                  }
                  @media (max-width: 767px) {
                    letter-spacing: 0;
                  }
                  span {
                    font-size: 87.5%;
                    @media (min-width: 768px) and (max-width: 1024px) {
                      font-size: 83%;
                    }
                    @media (max-width: 767px) {
                      font-size: 83%;
                    }
                  }
                }
              }
            }
            .box-drainup {
              border-bottom: 1px solid var(--color-border);
              margin-top: 24px;
              padding-bottom: 40px;
              margin-bottom: 40px;
              .drainup-title {
                text-align: center;
                font-size: 93.8%;
                line-height: 1;
                margin-bottom: 8px;
              }
              .img-drainup {
                width: 100%;
              }
            }
            .c-button-basic {
              max-width: 420px;
              margin: 48px auto 0;
              @media (max-width: 767px) {
                margin-top: 24px;
              }
            }
            .txt-caution {
              text-align: center;
              margin-top: 16px;
              font-size: 81.3%;
              opacity: 0.8;
              @media (max-width: 767px) {
                margin-top: 8px;
              }
            }
          }
          .c-button-accent {
            grid-area: 2 / 1 / 3 / 3;
            max-width: 640px;
            margin: 64px auto 0;
            @media (max-width: 767px) {
              order:5;
              margin: 40px auto 0;
            }
          }
        }
      }
    }
  }
}

/* -----------------------------------------------------------
	.p-benefits
----------------------------------------------------------- */
.p-benefits {
  background: #D4D1BF;
  padding: 160px 0;
  width: 100%;
  overflow: hidden;
  @media (max-width: 767px) {
    padding: 80px 0;
  }
  .wrap-benefits {
    .list-benefits {
      display: grid;
      position: relative;
      @media (min-width: 1025px) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr auto;
        grid-column-gap: 24px;
        grid-row-gap: 24px;
        margin-top: 64px;
      }
      @media (max-width: 1024px) {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, auto);
        gap:24px;
        margin-top: 40px;
      }
      &::before {
        content: '';
        background: url(../images/lp/bg-gradation.avif) center center no-repeat;
        background-size: 100% 100%;
        width: 100vw;
        height: 1086px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

      }
      .item-benefits {
        position: relative;
        z-index: 1;
        border-radius: 24px;
        background: #FFF;
        padding: 48px 40px 40px;
        @media (max-width: 767px) {
          padding: 24px 16px;
        }
        .number {
          text-align: center;
          color: var(--color-accent);
          font-family: var(--font-sans);
          line-height: 1;
          letter-spacing: 0.08em;
          margin-bottom: 16px;
        }
        h3 {
          text-align: center;
          color: var(--color-accent);
          line-height: 1.2;
          font-size: 1.625rem;
          @media (max-width: 767px) {
            font-size: 1.5rem;
          }
          span {
            background:linear-gradient(transparent 60%, var(--color-marker) 60%);
          }
          em {
            font-family: var(--font-sans);
            font-size: 2.25rem;
            font-weight: 500;
          }
        }
        .txt-caution-title {
          font-size: 93.8%;
          text-align: center;
          line-height: 1.5;
          margin-top: 8px;
          opacity: 0.8;
        }
        .txt-lead {
          margin: 24px auto 40px;
          line-height: 1.5;
          text-align: center;
          @media (max-width: 767px) {
            text-align-last: left;
            margin-bottom: 24px;
            br {
              display: none;
            }
          }
        }
        .box-benefits-detail {
          border-radius: 8px;
          background: #F5F6F7;
          padding: 24px;
          @media (max-width: 767px) {
            padding: 24px 16px;
          }
          h4 {
            text-align: center;
            font-size: 1.063rem;
            line-height: 1;
            em {
              font-family: var(--font-sans);
              font-size: 122.2%;
              font-weight: 400;
            }
          }
          .list-cost {
            margin-top: 14px;
            display: flex;
            flex-direction: column;
            gap:6px;
            li {
              &:nth-child(2) {
                .graf {
                  margin-bottom: 0;
                  img {
                    height: 53px;
                  }
                }
                .detail {
                  .title {
                    background-color: var(--color-accent);
                  }
                }
              }
              @media (max-width: 767px) {
                &:nth-child(2) {
                  .graf {
                    img {
                      width: 100%;
                      height: auto;
                    }
                  }
                }
              }
              .txt {
                font-size: 93.8%;
                line-height: 1;
                margin-bottom: 5px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                gap:8px;
                img {
                  max-width: 88px;
                  display: inline-block;
                }
              }
              .graf {
                margin-bottom: 4px;
                img {
                  height: 49px;
                  @media (max-width: 767px) {
                    width: 75%;
                    height: auto;
                  }
                }
              }
              .detail {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap:8px;
                .title {
                  display: inline-block;
                  background-color: var(--color-sub);
                  color: #fff;
                  font-size: 87.5%;
                  font-weight: 500;
                  line-height: 1;
                  padding: 3px 7px;
                  @media (max-width: 767px) {
                    font-size: 83%;
                    padding: 3px;
                  }
                }
                .formula {
                  em {
                    font-family: var(--font-sans);
                    font-weight: 400;
                    font-size: 107.1%;
                  }
                  @media (max-width: 767px) {
                    font-size: 83%;
                  }
                }
              }
            }
          }
          .txt-caution {
            font-size: 75%;
            opacity: 0.6;
            line-height: 1.4;
            margin-top: 16px;
            &.left {
              display: flex;
              &::before {
                content: "※";
              }
              @media (max-width: 767px) {
                br {
                  display: none;
                }
              }
            }
            &.center {
              text-align: center;
            }
          }
        }
        &:nth-child(1) {
          @media (min-width: 1025px) {
            grid-area: 1 / 1 / 2 / 2;
          }
          .box-benefits-detail {
            padding-bottom: 8px;
            h4 {
              margin-bottom: 15px;
            }
          }
        }
        &:nth-child(2) {
          @media (min-width: 1025px) {
            grid-area: 1 / 2 / 2 / 3;
          }
          .box-benefits-detail {
            h4 {
              margin-bottom: 20px;
            }
          }
        }
        &:nth-child(3) {
          @media (min-width: 1025px) {
            grid-area: 2 / 1 / 3 / 3;
            padding-bottom: 24px;
          }
          .box-finebubble {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: 1fr;
            margin-top: 56px;
            @media (max-width: 767px) {
              margin-top: 24px;
              grid-template-columns: 1fr;
              grid-template-rows: repeat(2, auto);
            }
            .item-finebubble {
              padding: 0 24px;
              &:not(:first-child) {
                border-left: 1px dashed var(--color-border);
              }
              @media (max-width: 767px) {
                padding: 0;
                &:not(:first-child) {
                  border-left: none;
                  border-top: 1px dashed var(--color-border);
                  padding-top: 24px;
                }
              }
              .en-title {
                height: 24px;
              }
              h4 {
                font-weight: 500;
                line-height: 1.4;
                font-size: 1.25rem;
                margin: 12px 0 40px;
                @media (max-width: 767px) {
                  margin-bottom: 16px;
                  font-size: 1.125rem;
                }
              }
              .img-finebubble {
                width: 100%;
              }
              .img-wrap {
                position: relative;
                .eyecatch {
                  position: absolute;
                  right: 0;
                  top: -108px;
                  width: 120px;
                  @media (min-width: 768px) and (max-width: 1024px) {
                    width: 80px;
                    top: -50px;
                  }
                  @media (max-width: 767px) {
                    width: 80px;
                    top: -60px;
                  }
                }
              }
              .howto {
                margin-top: 26px;
                line-height: 1.4;
                font-weight: 400;
                font-size: 87.5%;
                @media (max-width: 767px) {
                  margin-top: 16px;
                  font-size: 83%;
                }
              }
            }
          }
          .c-button-basic {
            margin: 80px auto;
            max-width: 420px;
            @media (max-width: 1024px) {
              margin: 40px auto;
            }
          }
          .txt-caution {
            &.right {
              font-size: 75%;
              line-height: 1.4;
              text-align: right;
              @media (max-width: 767px) {
                text-align: left;
              }
            }
          }
        }
      }
    }
  }
}

/* -----------------------------------------------------------
	.p-process
----------------------------------------------------------- */
.p-process {
  padding: 160px 0 240px;
  @media (max-width: 767px) {
    padding: 80px 0;
  }
  .wrap-process {
    @media (max-width: 767px) {
      width: 100%;
    }
    .txt-intro {
      text-align: center;
      font-weight: 500;
      line-height: 1.8;
      letter-spacing: 0.08em;
      font-size: 1.125rem;
      margin-top: 40px;
      @media (max-width: 767px) {
        width: 89.6%;
        margin-inline: auto;
        text-align: left;
        letter-spacing: 0;
        br {
          display: none;
        }
      }
      span {
        color: #A3521B;
        font-weight: 700;
        background:linear-gradient(transparent 60%, var(--color-marker) 60%);
      }
    }
    .p-process-block {
      margin-top: 64px;
      border-top: 1px solid rgba(255, 255, 255, 0.00);
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(10px);
      padding: 80px;
      @media (min-width: 768px) and (max-width: 1024px) {
        padding: 64px 24px;
      }
      @media (max-width: 767px) {
        margin-top: 24px;
        padding: 24px 8px;
      }
      img {
        width: 100%;
      }
      .txt-pickup {
        text-align: center;
        margin-top: 64px;
        font-size: 1.375rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        @media (max-width: 767px) {
          margin-top: 24px;
          font-size: 1.125rem;
          letter-spacing: 0;
          text-align: left;
          padding: 0 16px 16px;
          br {
            display: none;
          }
        }
        a {
          text-decoration: underline;
          @media (hover: hover) {
            transition: 0.3s;
            &:hover {
              opacity: 0.6;
            }
          }
        }
      }
    }
  }
}

/* -----------------------------------------------------------
	.p-link
----------------------------------------------------------- */
.p-link {
  background-color: var(--color-base);
  padding: 80px 0 120px;
  @media (max-width: 767px) {
    padding: 80px 0 80px;
  }
  .wrap-link {
    .c-title-basic {
      &::after {
        opacity: 0.5;
      }
      .wrap-title-basic {
        position: relative;
        .en {
          color: #fff;
        }
        .jp {
          color: #fff;
        }
      }
    }
    .p-link-block {
      border-radius: 8px;
      background: #FFF;
      backdrop-filter: blur(5px);
      margin-top: 32px;
      padding: 80px 40px;
      @media (max-width: 1024px) {
        display: flex;
	      flex-direction: column;
      }
      @media (min-width: 768px) and (max-width: 1024px) {
        padding: 40px 24px;
      }
      @media (max-width: 767px) {
        margin-top: 24px;
        padding: 32px 16px;
      }
      .list-link {
        @media (min-width: 768px) {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: 1fr;
          grid-column-gap: 80px;
          width: 100%;
          margin-bottom: 64px;
        }
        @media (min-width: 768px) and (max-width: 1024px) {
          grid-column-gap: 16px;
        }
        @media (max-width: 767px) {
          display: flex;
	        flex-direction: column;
          gap:24px;
          margin-bottom: 32px;
        }
        .item-link {
          &:not(:first-child) {
            position: relative;
            &::before {
              content: '';
              background-color: var(--color-border);
              width: 1px;
              height: 100%;
              position: absolute;
              top: 0;
              left: -40px;
            }
          }
          @media (min-width: 768px) and (max-width: 1024px) {
            &:not(:first-child) {
              &::before {
                left: -8px;
              }
            }
          }
          h3 {
            text-align: center;
            line-height: 1;
            font-size: 1.25rem;
            margin-bottom: 16px;
            @media (min-width: 768px) and (max-width: 1024px) {
              font-size: 1rem;
            }
            @media (max-width: 767px) {
              margin-bottom: 8px;
            }
          }
          .c-button-cv-accent {
            a {
              @media (min-width: 768px) and (max-width: 1024px) {
                br {
                  display: none;
                }
              }
            }
          }
          .txt-caution {
            opacity: 0.8;
            line-height: 1.4;
            font-size: 81.3%;
            text-align: center;
            margin-top: 8px;
            @media (max-width: 767px) {
              margin-top: 4px;
            }
          }
        }
      }
      .p-link-block-cv {
        border-top: 1px solid var(--color-border);
        padding-top: 48px;
        text-align: center;
        @media (max-width: 767px) {
          padding-top: 32px;
        }
        h3 {
          line-height: 1;
          font-size: 1.75rem;
          margin-bottom: 28px;
          @media (max-width: 767px) {
            font-size: 1.25rem;
            margin-bottom: 16px;
          }
        }
        address {
          margin-bottom: 32px;
          @media (max-width: 767px) {
            margin-bottom: 16px;
          }
          .tel {
            display: block;
            font-family: var(--font-sans);
            font-size: 1.125rem;
            letter-spacing: 0.08em;
            margin-bottom: 8px;
            font-weight: 400;
            em {
              font-size: 1.5rem;
            }
          }
          .hour {
            display: block;
            line-height: 1.4;
            em {
              font-family: var(--font-sans);
              font-weight: 400;
              font-size: 1.25rem;
            }
            .off {
              font-size: 87.5%;
              @media (max-width: 767px) {
                display: block;
              }
            }
          }
        }
        .c-button-cv-accent {
          max-width: 720px;
          margin: 0 auto;
          a {
            font-size: 1.25rem;
          }
        }
      }
    }
  }
}

/* -----------------------------------------------------------
	.p-banner-proxy
----------------------------------------------------------- */
.p-banner-proxy {
  a {
    display: block;
    .img {
      width: 100%;
      @media (min-width: 768px) and (max-width: 1024px) {
        display: block;
        aspect-ratio: 1/0.5;
      }
      img {
        width: 100%;
        @media (min-width: 768px) and (max-width: 1024px) {
          height: 100%;
          object-fit: cover;
        }
      }
    }
    @media (hover: hover) {
			transition: 0.3s;
			&:hover {
				opacity: 0.6;
			}
		}
  }
}