/* .loading{
  width: 100dvw;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--white);

  z-index: 1500;
}
.loading.fadeout {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
  svg {
    width: 100%;
    height: 100%;
  }
    .dot {
      stroke: #fff;
      stroke-width: 0.5px;
      transform-origin: center;
      opacity: 0;
      r: max(1vw, 11px);
      cy: 50%;
      fill: var(--color);
      filter: saturate(2) opacity(0.85);

      animation: loader 3s ease-in-out infinite;
    }
      
    .dot:nth-child(1) {
      animation-delay: 0s;
    }
      
    .dot:nth-child(2) {
      animation-delay: 0.15s;
    }
      
    .dot:nth-child(3) {
      animation-delay: 0.3s;
    }
      
    .dot:nth-child(4) {
      animation-delay: 0.45s;
    }
      
    .dot:nth-child(5) {
      animation-delay: 0.6s;
    }
    @keyframes loader {
      0%,
      100% {
        opacity: 0;
        transform: scale(1);
      }
      45%,
      65% {
        opacity: 1;
        transform: scale(0.7);
      }
    } */




.hero{
  width: 100dvw;
  height: 100dvh;
}
    .hero-container{
      position: relative;
      width: 100dvw;
      height: 100dvh;
    }

    .hero-container .background{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      width: 100dvw;
      height: 100dvh;
    }
      .background-image-wrapper{
        position: relative;
        width: 100%;
        height: 100%;
      }
        .background-image-wrapper img{
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          opacity: 0;

          transition: 0.5s ease-in-out;
        }
        .background-image-wrapper img.active{
          opacity: 1;
        }
    .hero-container .overflow{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: auto;

      display: flex;
      justify-content: center;
    }
      .overflow-content{
        position: relative;

        max-width: 1170px;
        width: 100%;
        height: auto;
        text-align: center;
      }
        .overflow-content-box{
          position: absolute;
          top: 20%;
          left: 50%;
          transform: translateX(-50%);
          -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);

          width: auto;
          height: auto;

          display: flex;
          flex-direction: column;
          align-items: center;
        }
          .overflow-content h2{
            font-size: 2.5rem;
            font-weight: normal;
            color: var(--white);

            margin-top: 15px;
            text-shadow: 
            0 0 1px #ffffffb0, 0 0 3px #ffffff80, 0 0 6px #ffffff80, 0 0 10px #ffffff;
          }
          .overflow-content h5{
            font-size: 5rem;
            font-weight: normal;
            color: var(--white);
            white-space: nowrap;

            margin-top: 30px;
            text-shadow: 
            0 0 1px #ffffffb0, 0 0 3px #ffffff80, 0 0 6px #ffffff80, 0 0 10px #ffffff;
          }
          .overflow-content .get-started-btn{
            width: 200px;
            height: 45px;
            border-radius: 23px;
            background-color: var(--white);

            padding: 0 1rem;
            margin-top: 40px;

            display: flex;
            justify-content: space-between;
            align-items: center;
          }
            .overflow-content .get-started-btn p{
              font-size: var(--accent-font-sise);
              color: var(--black);
            }
            .overflow-content .get-started-btn .arrow-icon{
              width: 30px;
              height: 30px;
              background-color: #D9D9D9;
              border-radius: 15px;

              display: flex;
              justify-content: center;
              align-items: center;
            }
    .hero-container .hover-counter{
      position: absolute;
      left: 40px;
      bottom: 40px;

      width: 240px;
      height: 240px;

      z-index: 100;

      background: rgba(255, 255, 255, 0.21);
      border-radius: 30px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);

      transform-style: preserve-3d;
      transform: perspective(1000px); 
      transform: translateZ(10px);
    }
      .counter-content{
        box-sizing: border-box;
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        transform: translateZ(30px);
      }
        .counter-content .member-icon-box{
          width: auto;
          height: 55px;

          display: flex;
          justify-content: center;
        }
          .counter-content .member-icon-box img{
            width: 55px;
            height: 55px;
            border-radius: 50%;
            object-fit: cover;

            margin-left: -20px;
          }
          .counter-content .member-icon-box img:first-child{
            margin-left: 0;
          }
        .counter-content .member-counter{
          width: auto;
          height: auto;
        }
          .counter-content .member-counter p{
            text-align: center;
            color: var(--white);
            text-shadow: 
            0 0 1px #ffffffb0, 0 0 3px #ffffff80, 0 0 6px #ffffff80, 0 0 10px #ffffff;
            font-weight: lighter;
          }
          .counter-content .member-counter .member-num{
            font-size: 50px;
          }
          .counter-content .member-counter .member-desc{
            font-size: 25px;
          }
    .hero-container .hover-selector{
      position: absolute;
      right: 40px;
      bottom: 40px;

      width: 300px;
      height: auto;
      display: flex;
      flex-direction: column;

      z-index: 100;
    }
      .selector-content{
        position: relative;
        width: 300px;
        height: 260px;
      }
        .selector-list{
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);

          width: 260px;
          height: 260px;
          
          display: flex;
        }
          .prefecture-box{
            display: none;

            position: relative;
            top: 0;
            left: 0;

            width: 100%;
            height: 100%;
            
            border-radius: 30px;
            overflow: hidden;
          }
          .prefecture-box.active{
            display: block;
          }
            .prefecture-box img{
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
            .prefecture-box .name{
              box-sizing: border-box;

              position: absolute;
              left: 0;
              bottom: 0;

              width: 100%;
              height: auto;
              padding: 1rem;
              background: linear-gradient(to top, #000000 50%, rgba(0, 0, 0, 0) 100%);
            }
              .prefecture-box .name p{
                font-size: 42px;
                color: var(--white);
                font-family: var(--second-font-family);
                line-height: 3rem;
              }
        .selector-btn{
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);

          width: 100%;
          height: auto;

          display: flex;
          justify-content: space-between;
        }
        .hover-label {
          position: fixed;
          pointer-events: none;

          background: rgba(255, 255, 255, 0.21);
          border-radius: 30px;
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          
          color: #fff;
          padding: 4px 8px;
          border-radius: 4px;
          font-size: 14px;
          z-index: 9999;
          white-space: nowrap;
          display: none;
        }

.concept{
  width: 100dvw;
  height: auto;
  position: relative;
}
  .section-container.background{
    position: absolute;
    max-width: 100dvw;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
    .background-box{
      position: relative;
      max-width: 100dvw;
      width: 100%;
      height: 100%;
    }
    .section-container.background img{
      position: absolute;

      width: 900px;
    }
    .section-container.background .background-map-1{
      top: 0;
      right: -450px;
    }
    .section-container.background .background-map-2{
      bottom: 0;
      left: -450px;
    }
  .section-container.content{
    max-width: 100dvw;
    width: 100% !important;
    height: auto;

    padding: 300px 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    z-index: 10;
  }
    .section-container.content .concept-box{
      max-width: 600px;
      width: 100%;

      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 50px;
    }
      .concept-subtitle{
        font-size: 48px;
        color: var(--white);
        font-family: var(--second-font-family);
        letter-spacing: 0.3rem;
      }
      .concept-title{
        font-size: 48px;
        color: var(--white);
        font-family: var(--second-font-family);
        letter-spacing: 0.3rem;
      }
      .section-container.content .concept-box p{
        font-size: var(--default-font-sise);
        color: var(--white);
        font-family: var(--second-font-family);
        line-height: var(--default-line-height);
      }
    .section-container.content .center-line{
      height: 230px;
      width: 0;
      border-right: solid 1px var(--white);
      margin-top: 200px;
    }

.experience{
  width: 100dvw;
  height: auto;
  display: flex;
  flex-direction: column;
}
  .section-title-block{
    max-width: 1170px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;

    margin: 0 auto;
  }
    .section-title-block h4{
      color: var(--white);
      font-size: 2.5rem;
      font-family: var(--second-font-family);
    }
  .counter-viewer{
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 100px;

    margin: 50px 0;
  }
    .counter-line {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 200px;
    }
      .counter-label {
        color: white;
        font-family: var(--second-font-family);
        font-size: 14px;
        width: auto;
      }
      .progress-bar {
        position: relative;
        flex: 1;
        height: 2px;
        background-color: #444;
      }  
        .progress-fill {
          position: absolute;
          top: 0;
          left: 0;
          height: 2px;
          background-color: white;
          width: 0%;
          transition: width 0.4s ease;
        }
    .counter-control-btn{
      width: auto;
      height: auto;
    }
      .counter-control-btn .next-btn{
        display: block;
        width: 33px;
        height: 33px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--white);
        border-radius: 50%;
      }
        .counter-control-btn a p{
          color: #000000;
        }
  .content-container{
    width: 100%;
    height: 700px;
    overflow: hidden;
    position: relative;
  }
  .content-container.pc{
    display: block;
  }
  .content-container.sp{
    display: none;
  }
    .content-list{
      display: flex;
      gap: 50px;
      transition: transform 0.4s ease;
      will-change: transform;
    }
    .content-list::-webkit-scrollbar {
      display:none;
     }
      .content-list .card{
        position: relative;
        width: 420px;
        height: 640px;

        min-width: 420px;
        flex-shrink: 0;
      }
      .card.remove-animate {
        transition: all 0.4s ease;
        opacity: 0;
        transform: scale(0.8);
        pointer-events: none;
      }
        .card-image {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;

          width: 100%;
          height: 100%;
          border-radius: 30px;

          transition: 0.3s ease-in-out;

          z-index: 10;
        }
          .card-image img{
            width: 100%;
            height: 100%;
            border-radius: 30px;
            object-fit: cover;
          }
        .card-over-symbol{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;

          transition: 0.3s ease-in-out;

          z-index: 15;
        }
          .symbol-items{
            position: relative;
            width: 100%;
            height: 100%;
            color: var(--white);
          }
            .symbol-items h6{
              position: absolute;
              top: 30px;
              left: 30px;

              font-family: var(--default-font-family);
              font-size: var(--title-font-sise);
              font-weight: normal;
            }
            .symbol-items .keywords{
              position: absolute;
              bottom: 30px;
              left: 30px;
              display: flex;
              gap: 10px;
            }
              .symbol-items .keywords p{
                width: 80px;
                padding: 5px;
                border-radius: 25px;
                border: 1px solid var(--white);

                display: flex;
                align-items: center;
                justify-content: center;
              }
        .card-over-active{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
          .card-over-active .tag-item{
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
            .card-over-active .tag-item .item-box{
              position: absolute;
              top: 1rem;
              right: 1rem;

              width: 170px;
              height: 40px;

              display: flex;
              justify-content: center;
              align-items: center;
  
              background: rgba(255, 255, 255, 0.2);
              border-radius: 20px;
              box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
              backdrop-filter: blur(5px);
              -webkit-backdrop-filter: blur(5px);
              border: 0.5px solid rgba(255, 255, 255, 0.3);

              z-index: 15;

              opacity: 0;
              transition: 0.5s;
              transition-delay: 0.1s;
            }
              .card-over-active .tag-item .item-box p{
                color: var(--white);
                font-size: var(--accent-font-sise);
              }
        .card-desc{
          position: absolute;
          bottom: 0;
          left: 0;
          box-sizing: border-box;

          display: flex;
          flex-direction: column;
          gap: 1rem;

          width: 100%;
          height: calc(100% - 480px);
          margin-bottom: -50px;
          padding: 1rem;
          color: var(--white);
          font-family: var(--second-font-family);
          opacity: 0;

          transition: 0.3s ease-in-out;
          transition-delay: 0s;
        }
          .card-desc .title{
            font-size: 2.3rem;
            font-family: var(--second-font-family);
          }
          .card-desc .desc{
            font-size: var(--default-font-sise);
            font-family: var(--second-font-family);
          }
      .card.active .card-image{
        height: 480px !important;
      }
      .card.active .card-over-symbol{
        opacity: 0;
      }
      .card.active .card-desc{
        opacity: 1;
        margin-bottom: 0;
        transition-delay: 0.1s;
      }
      .card.active .card-over-active .tag-item .item-box{
        opacity: 1;
      }

 /* .experience-list.sp{
  display: none;
 } */
























@media (max-width: 440px) {

.hero{

}
    .hero-container .background{
      width: 100%;
      height: 75%;
    }
        .background-image-wrapper img{
          border-radius: 30px;
        }
    .hero-container .overflow{
      height: 75%;
    }
      .overflow-content{
        max-width: 100dvw;
        height: 100%;
      }
        .overflow-content-box{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          width: 100%;
          padding: 0 20px;
        }
          .overflow-content h2{
            font-size: 1.8rem;
            font-weight: normal;
          }
          .overflow-content h5{
            font-size: 3rem;
            white-space: wrap;
          }
    .hero-container .hover-counter{
      display: none;
    }
    .hero-container .hover-selector{
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);

      width: 100%;
      height: calc(25% - 20px);
      padding: 0 20px;
      flex-direction: row;
      justify-content: center;
    }
      .selector-content{
        width: 100%;
        height: 100%;
      }
        .selector-list{
          width: 80%;
          height: 100%;
        }
.concept{

}
    .section-container.background img{
      width: 450px;
    }
    .section-container.background .background-map-1{
      top: 0;
      right: -230px;
    }
    .section-container.background .background-map-2{
      bottom: 0;
      left: -230px;
    }
    .section-container.content .concept-box{
      gap: 25px;
    }
      .concept-subtitle{
        margin-top: 10px;
        font-size: var(--subtitle-font-sise);
      }
      .concept-title{
        font-size: var(--subtitle-font-sise);
      }
      .section-container.content .concept-box p{
        box-sizing: border-box;
        margin-top: 25px;
        width: 100%;
        padding: 0 20px;
      }
    .section-container.content .center-line{
      display: none;
    }
.experience{
  display: flex;
  flex-direction: column-reverse;

  height: 100dvh;
}
    .experience .section-title-block {
      display: none;
    }
  .counter-viewer{
    padding: 0 30px;
    height: 10%;
  }
    .counter-line{
      width: 100%;
    }
    .counter-control-btn{
      display: none;
    }
  .content-container{
    overflow: hidden;
    height: 90%;
    width: 100dvw;
  }
  .content-container.pc{
    display: none;
  }
  .content-container.sp{
    display: block;
  }
    .content-list{
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      width: calc(100% - 40px); /* 20px margin on each side */
      height: 100%;
      gap: 20px;
      margin: 0 20px;
      box-sizing: border-box;
    }
      .content-list .card{
        width: calc(100dvw - 40px) !important;
        min-width: 300px;
        height: 100%;
        scroll-snap-align: center;
      }
      .content-container::-webkit-scrollbar {
        display: none;
      }
        .card-desc{
          width: 100%;
          height: 20%;
        }
        .card-desc .title{
          font-size: var(--accent-font-sise);
        }
    .card.active .card-image{
      width: 100%;
      height: 80% !important;
    }
    .card.active .card-desc{
      width: 100%;
      opacity: 1;
      margin-bottom: 0;
      transition-delay: 0.1s;
    }
    .card.active .card-over-active .tag-item .item-box{
      opacity: 1;
    }
/* .experience {
  height: 100dvh;
  position: relative;
  overflow: hidden;
}
  .experience-list.sp {
    position: sticky;
    top: 0;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
    .scroll-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 30px;
      width: calc(100% - 60px);
    }
      .card {
        background: #ccc;
        border-radius: 20px;
        transition: transform 0.3s, height 0.3s, width 0.3s, opacity 0.3s;
        will-change: transform, height, width, opacity;
        width: 100%;
        flex-shrink: 0;
        overflow: hidden;
        position: relative;
      }
        .card img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
        .card .overflow-box {
          position: absolute;
          bottom: 0;
          width: 100%;
          padding: 16px;
          box-sizing: border-box;
          background: rgba(0, 0, 0, 0.3);
          color: white;
          height: auto;
        } */
}