@charset "utf-8";

main {
  overflow: clip;
}

.fv,
.sec-box {
  position: relative;
  overflow: hidden;
}

.fv-parallax,
.sec-box-parallax {
  will-change: transform;
}

/* ↓↓↓ fv ↓↓↓ */
.fv {
  position: relative;
  width: 100%;
  height: 100dvh;
  background: url(../img/top/fv-bg.png) no-repeat;
  background-size: cover;
  @media (max-width: 768px) {
    height: 100lvh !important;
    background: url(../img/top/fv-bg_sp.png) no-repeat;
    background-size: cover;
  }
  .fv-parallax {
    position: relative;
    width: 100%;
    height: 100%;
    .fv-copy {
      position: absolute;
      translate: max(-600px, -46.875vw) 0;
      left: 50%;
      top: min(436px, 34.0625vw);
      width: min(536px, 41.875vw);
      @media (max-width: 768px) {
        translate: -160px 0;
        left: 50%;
        top: 50%;
        width: 268px;
      }
    }

    .fv-image {
      position: absolute;
      translate: min(570px, 44.53125vw) 0 !important;
      top: min(98px, 7.65625vw);
      right: 50%;
      width: min(562px, 43.90625vw);
      transform-origin: 50% bottom;

      @media (max-width: 768px) {
        position: absolute;
        translate: 150px 0 !important;
        top: 32.38%;
        right: 50%;
        width: 266px;
        transform-origin: 50% bottom;
      }
    }
  }
}
/* ↑↑↑ fv ↑↑↑ */

/* ↓↓↓ sec-box ↓↓↓ */
.sec-box {
  width: 100%;
  .sec-box-parallax {
    width: 100%;
    height: 100%;
    .sec-box_inner {
      max-width: 1280px;
      margin: 0 auto;
      container-type: inline-size;
      @media (max-width: 768px) {
        max-width: 100%;
      }
      .ttl-wrap {
        position: relative;
        width: 75cqw;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin: 0 auto;
        color: #fff;

        @media (max-width: 768px) {
          width: 100%;
          padding: 0 32px;
        }

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 0%;
          height: 1px;
          background-color: currentColor;
          transition: width 500ms ease;
          @media (max-width: 768px) {
            left: 32px;
          }
        }

        &:has(.-active) {
          &::after {
            width: 100%;
            @media (max-width: 768px) {
              width: calc(100% - 64px);
            }
          }
        }

        .sub {
          font-size: 1.875cqw;
          font-weight: 700;
          line-height: 1.458;
          color: #fff;
          margin-bottom: 2.109375cqw;
          overflow: hidden;
          span {
            display: block;
          }
          @media (max-width: 768px) {
            position: absolute;
            font-size: 1.6rem;
            right: 32px;
            bottom: -35px;
            margin: 0;
          }
        }
      }

      .txt01 {
        width: 75cqw;
        font-size: 2.5cqw;
        font-weight: 700;
        line-height: 1.3125;
        color: #fff;
        margin: 1.40625cqw auto 0;

        @media (max-width: 768px) {
          width: 100%;
          font-size: 1.8rem;
          padding: 0 32px;
          margin: 45px auto 0;
        }
      }

      .txt02 {
        width: 75cqw;
        font-size: 1.25cqw;
        font-weight: 700;
        line-height: 2;
        color: #fff;
        margin: 1.40625cqw auto 0;
        @media (max-width: 768px) {
          width: 100%;
          font-size: 1.4rem;
          line-height: 1.71428;
          margin: 10px auto 0;
          padding: 0 32px;
        }
      }

      .btn {
        position: relative;
        width: 17.34375cqw;
        aspect-ratio: 222 / 64;
        display: flex;
        margin: 3.75cqw auto 0;
        border-radius: 50px;
        overflow: hidden;
        z-index: 0;

        @media (max-width: 768px) {
          width: 136px;
          aspect-ratio: 136 / 40;
          margin: 30px auto 0;
        }
        
        .btn-txt {
          position: relative;
          width: 8.515625cqw;
          margin: 1.015625cqw auto;

          @media (max-width: 768px) {
            width: 68px;
            margin: 0 auto;
          }

          picture {
            display: block;
            width: 100%;
          }

          &::after {
            content: '';
            position: absolute;
            translate: 0 -50%;
            top: 50%;
            right: -2.8125cqw;
            width: 1.484375cqw;
            height: 1.015625cqw;
            background: url(../img/top/btn-arrow.svg) no-repeat;
            background-size: cover;

            @media (max-width: 768px) {
              right: -21px;
              width: 11px;
              height: 7px;
            }
          }

          &.-ex {
            &::after {
              content: '';
              position: absolute;
              translate: 0 -50%;
              top: 50%;
              right: -2.8125cqw;
              width: 1.328125cqw;
              height: 1.328125cqw;
              background: url(../img/top/ex-link.svg) no-repeat;
              background-size: cover;

              @media (max-width: 768px) {
                right: -21px;
                width: 11px;
                height: 11px;
              }
            }
          } 
        }

        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image: var(--grad01);
          z-index: -1;
          transition: translate 300ms ease;
        }
        &::before {
          content: '';
          position: absolute;
          translate: -99% 0;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image: var(--grad02);
          z-index: -1;
          transition: translate 300ms ease;
        }

        @media (min-width: 769px) {
          &:hover {
            &::after {
              translate: 100% 0;
            }
            &::before {
              translate: 0 0;
            }
          }
        }
      }
    }
  }

  &#anchor01 {
    .sec-box-parallax {
      aspect-ratio: 1280 / 800;
      height: min(800px, 62.5vw);
      background: url(../img/top/sec-box01-bg.jpg) no-repeat;
      background-size: cover;
      background-position: center;
      @media (max-width: 768px) {
        aspect-ratio: 375 / 640;
        height: 640px;
        background: url(../img/top/sec-box01-bg_sp.jpg) no-repeat;
        background-size: cover;
        background-position: center;
      }

      .sec-box_inner {
        .ttl-wrap {
          margin: 18.75cqw auto 0;

          @media (max-width: 768px) {
            margin: 228px auto 0;
          }

          .ttl {
            width: 49.765625cqw;
            overflow: hidden;

            @media (max-width: 768px) {
              width: 279px;
            }

            picture {
              display: block;
              width: 100%;
            }
          }
        }
      }
    }
  }
  &#anchor02 {
    .sec-box-parallax {
      aspect-ratio: 1280 / 976;
      height: min(976px, 76.25vw);
      background: url(../img/top/sec-box02-bg.png) no-repeat;
      background-size: cover;
      background-position: center center;
      @media (max-width: 768px) {
        width: 100%;
        height: fit-content;
        max-height: 1640px;
        background: url(../img/top/sec-box02-bg_sp.png) no-repeat;
        background-size: cover;
        background-position: center center;
        padding-bottom: 35px;
      }

      .sec-box_inner {
        .ttl-wrap {
          margin: 8.984375cqw auto 0;

          @media (max-width: 768px) {
            margin: 65px auto 0;
          }

          .ttl {
            width: 51.5625cqw;
            margin-bottom: 2.109375cqw;
            overflow: hidden;

            @media (max-width: 768px) {
              width: 289px;
              margin-bottom: 12px;
            }

            picture {
              display: block;
              width: 100%;
            }
          }
        }

        .container {
          display: flex;
          width: 78.75cqw;
          gap: 1.875cqw;
          justify-content: center;
          margin: 4.6875cqw auto 0;
          @media (max-width: 768px) {
            flex-direction: column;
            width: 100%;
            gap: 16px;
            padding: 0 27px;
            margin: 58px auto 0;
          }
          .card {
            width: 25cqw;
            padding: 2.734375cqw 2.1875cqw 3.515625cqw;
            border-radius: 20px;
            background-color: #fff;
            transition: opacity 300ms ease;
            @media (max-width: 768px) {
              width: 100%;
              padding: 34px 28px 50px;
            }

            .image {
              width: 100%;
              overflow: hidden;
              border-radius: 20px;
            }
            .head {
              position: relative;
              font-size: 1.5625cqw;
              letter-spacing: 0.075em;
              margin-block: 2.5cqw 0;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2; /* 表示したい行数 */
              overflow: hidden;
              
              @media (max-width: 768px) {
                font-size: 1.6rem;
                margin-block: 24px 0;
              }
            }

            .line {
              display: block;
              width: 1.875cqw;
              height: 1px;
              background-color: #000;
              margin-block: 1.875cqw;
              @media (max-width: 768px) {
                width: 24px;
                margin-block: 20px;
              }
            }

            .txt {
              position: relative;
              font-size: 1.25cqw;
              line-height: 2;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 3; /* 表示したい行数 */
              overflow: hidden;
              margin-top: 1.875cqw;
              @media (max-width: 768px) {
                font-size: 1.4rem;
              }
            }

            @media (min-width: 769px) {
              &:hover {
                opacity: 0.7;
              }
            }
          }
        }
      }
    }
  }

  &#anchor03 {
    .sec-box-parallax {
      aspect-ratio: 1280 / 800;
      height: min(800px, 62.5vw);
      background: url(../img/top/sec-box03-bg.jpg) no-repeat;
      background-size: cover;
      background-position: center;
      @media (max-width: 768px) {
        aspect-ratio: 375 / 640;
        height: 640px;
        background: url(../img/top/sec-box03-bg_sp.jpg) no-repeat;
        background-size: cover;
        background-position: center;
      }

      .sec-box_inner {
        .ttl-wrap {
          margin: 21.09375cqw auto 0;

          @media (max-width: 768px) {
            margin: 156px auto 0;
          }

          .ttl {
            width: 25.546875cqw;
            margin-bottom: 2.109375cqw;
            overflow: hidden;

            @media (max-width: 768px) {
              width: 143px;
              margin-bottom: 12px;
            }

            picture {
              display: block;
              width: 100%;
            }
          }
        }
      }
    }
  }
  &#anchor04 {
    .sec-box-parallax {
      aspect-ratio: 1280 / 1632;
      height: min(1632px, 127.49999999999999vw);
      background: url(../img/top/sec-box04-bg.png) no-repeat;
      background-size: cover;
      background-position: center top;
      @media (max-width: 768px) {
        aspect-ratio: 375 / 2000;
        height: 2000px;
        background: url(../img/top/sec-box04-bg_sp.png) no-repeat;
        background-size: cover;
        background-position: center top;
      }

      .sec-box_inner {
        .ttl-wrap {
          margin: 7.8125cqw auto 0;

          @media (max-width: 768px) {
            margin: 73px auto 0;
          }

          .ttl {
            width: 44.21875cqw;
            margin-bottom: 2.109375cqw;
            overflow: hidden;

            @media (max-width: 768px) {
              width: 248px;
              margin-bottom: 12px;
            }


            picture {
              display: block;
              width: 100%;
            }
          }
        }

        .container {
          width: 85cqw;
          margin: 3.515625cqw auto 0;

          @media (max-width: 768px) {
            width: 100%;
            padding: 0 27px;
            margin: 56px auto 0;
          }
          
          .card {
            display: flex;
            justify-content: space-between;
            padding: 3.75cqw;
            background-color: #fff;
            border-radius: 64px;

            @media (max-width: 768px) {
              flex-direction: column;
              padding: 32px 27px 38px;
              border-radius: 35px;
            }

            + .card {
              margin-top: 2.34375cqw;

              @media (max-width: 768px) {
                margin-top: 16px;
              }
            }
            
            .image {
              width: 33.59375cqw;
              overflow: hidden;
              border-radius: 16px;
              box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.08), -1px -1px 12px rgba(0, 0, 0, 0.08);
              @media (max-width: 768px) {
                width: 100%;
              }
            }

            .txt-wrap {
              width: 41.171875cqw;
              margin-top: 3.125cqw;
              @media (max-width: 768px) {
                width: 100%;
                margin-top: 26px;
              }

              .head {
                position: relative;
                font-size: 1.875cqw;
                font-weight: 700;
                letter-spacing: 0.075em;
                padding-bottom: 1.25cqw;
                @media (max-width: 768px) {
                  font-size: 1.6rem;
                  padding-bottom: 16px;
                }

                &::after {
                  content: '';
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  width: 3.75cqw;
                  height: 1px;
                  background-color: #e08c6b;

                  @media (max-width: 768px) {
                    width: 24px;
                    background-color: #000;
                  }
                }
              }
              .txt {
                font-size: 1.25cqw;
                line-height: 2;
                letter-spacing: 0.05em;
                text-align: justify;
                word-break: break-all;
                margin-top: 1.25cqw;
                @media (max-width: 768px) {
                  font-size: 1.4rem;
                  margin-top: 16px;
                }
              }
            }
          }
        }
      }
    }
  }
  &#anchor05 {
    .sec-box-parallax {
      background-color: #212121;
      padding-bottom: 8.59375cqw;
      .sec-box_inner {
        position: relative;
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 58.4375cqw;
          background: url(../img/top/sec-box05-bg.png) no-repeat;
          background-size: cover;
        }
        .ttl-wrap {
          position: relative;
          margin: 8.59375cqw auto 0;
          color: #d8ae5e;
          z-index: 2;

          @media (max-width: 768px) {
            margin: 60px auto 0;
          }

          .ttl {
            width: 61.5625cqw;
            overflow: hidden;

            @media (max-width: 768px) {
              width: 184px;
            }


            picture {
              display: block;
              width: 100%;
            }
          }

          .sub {
            color: #d8ae5e;
          }
        }

        .list {
          position: relative;
          width: 75cqw;
          margin: 3.515625cqw auto 0;
          padding-left: 1.171875cqw;
          z-index: 2;
          @media (max-width: 768px) {
            width: 100%;
            margin: 55px auto 0;
            padding-inline: 32px 15px;
          }
          .item {
            display: flex;
            gap: 6.640625cqw;
            @media (max-width: 768px) {
              gap: 10px;
            }
            + .item {
              margin-top: 0.78125cqw;
              @media (max-width: 768px) {
                gap: 16px;
              }
            }
            .head {
              width: 6.25cqw;
              font-size: 1.25cqw;
              letter-spacing: 0;
              color: #d8ae5e;
              @media (max-width: 768px) {
                width: 70px;
                font-size: 1.4rem;
              }
            }
            .detail {
              font-size: 1.25cqw;
              color: #d8ae5e;
              letter-spacing: 0;

              @media (max-width: 768px) {
                width: calc(100% - 90px);
                font-size: 1.4rem;
              }
            }
          }
        }

        .map {
          position: relative;
          width: 75cqw;
          margin: 3.125cqw auto 0;
          z-index: 2;
          overflow: hidden;
          border-radius: 26px;
          @media (max-width: 768px) {
            width: 100%;
            margin: 45px auto 0;
            padding-inline: 32px;
          }
          picture {
            display: block;
            width: 100%;
            border-radius: 26px;
            overflow: hidden;
          }
        }
      }
    }
  }
}
/* ↑↑↑ sec-box ↑↑↑ */

.-fadeIn {
  opacity: 0;
}