@keyframes mainVisual_v2025__circle {
  0% {
    stroke-dashoffset: 2000px;
  }
  100% {
    stroke-dashoffset: 1233px;
  }
}
@keyframes mainVisual_v2025__line {
  0% {
    stroke-dashoffset: 2000px;
  }
  100% {
    stroke-dashoffset: 1773px;
  }
}
@keyframes slideInfinite {
  0% {
    translate: 0% 0;
  }
  100% {
    translate: -100% 0;
  }
}

.mainVisual_v2025 {
  --mv_vw: calc(1000vw/1400);
  background-color: #F8F8F8;
  overflow: hidden;
  /* padding: calc(4.7 * var(--mv_vw)) 0 calc(26 * var(--mv_vw)); */
  padding: calc(4.7 * var(--mv_vw)) 0 calc(21 * var(--mv_vw));
  opacity: 0;
  @media screen and (max-width: 767px) {
    --mv_vw: calc(1000vw/375);
    padding: 0;
  }
  &.isAnimated {
    opacity: 1;
    transition: opacity .5s ease .3s;
    .mainVisual_v2025__grp {
      opacity: 1;
      translate: 0% 0%;
      transition:
        opacity 1s ease-out 1.6s,
        translate 1s ease-out 1.6s;
      @media screen and (max-width: 767px) {
        transition:
          opacity 1s ease-out 1.2s,
          translate 1s ease-out 1.2s;
      }
    }
    .mainVisual_v2025__door {
      &::before {
        transition: clip-path 1.8s ease .8s;
        clip-path: polygon(52.5% 0%, 100% 8.1%, 100% 86.2%, 52.5% 100%);
      }
      &::after {
        transition: clip-path 1.8s cubic-bezier(.36,.99,.51,1) .8s;
        clip-path: polygon(calc(100% - 27.6 * var(--mv_vw)) 0, 100% 0, 75.8% 100%, 0 100%);
      }
    }
    #mainVisual_v2025__circle path {
      animation: mainVisual_v2025__circle .8s ease-in-out 2.85s forwards;
      @media screen and (max-width: 767px) {
        animation: mainVisual_v2025__circle .8s ease-in-out 2.45s forwards;
      }
    }
    #mainVisual_v2025__line path {
      animation: mainVisual_v2025__line .65s ease-in-out 3.5s forwards;
      @media screen and (max-width: 767px) {
        animation: mainVisual_v2025__line .65s ease-in-out 3.1s forwards;
      }
    }
  
    .top_main_btn{
      @media screen and (min-width: 768px) {
        translate: 0 0rem;
        opacity: 1;
        pointer-events: auto;
        transition:
          opacity .6s ease 3.9s,
          translate .6s ease 3.9s;
      }
    }
  }
  .mainVisual_v2025__wrap {
    @media screen and (max-width: 767px) {
      display: grid;
      gap: calc(22 * var(--mv_vw));
      background-color: #fff;
    }
  }
  .mainVisual_v2025__content {
    position: relative;
    z-index: 0;
  }
  .mainVisual_v2025__door {
    /* width: calc(31.6 * var(--mv_vw)); */
    width: calc(27.8 * var(--mv_vw));
    aspect-ratio: 316/373;
    position: absolute;
    background: linear-gradient(90deg, #fff 95%, #ED6C00 95%);
    box-sizing: border-box;
    top: 0;
    left: calc(81.4 * var(--mv_vw));
    z-index: 10;
    @media screen and (max-width: 767px) {
      width: calc(9.4 * var(--mv_vw));
      top: auto;
      left: auto;
      right: 0;
      bottom: 0;
      perspective: calc(35 * var(--mv_vw));
    }
    &::before {
      content: '';
      display: block;
      position: absolute;
      top: -10.2%;
      left: 0;
      right: 0;
      bottom: -17.7%;
      background-color: #ED6C00;
      transform-origin: right;
      clip-path: polygon(0% 8.1%, 100% 8.1%, 100% 86.2%, 0% 86.2%);
      z-index: 11;
    }
    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 100%;
      left: calc(220 * var(--mv_vw) * -1);
      right: 0;
      bottom: calc(26 * var(--mv_vw) * -1);
      background-color: #fff;
      clip-path: polygon(calc(100% - 31.6 * var(--mv_vw)) 0, 100% 0, 0 0, 0 0);
      transform-origin: right top;
    }
  }
  .mainVisual_v2025__wrap {
    position: relative;
  }
  .mainVisual_v2025__slider__set {
    /* display: flex;
    flex-wrap: nowrap; */
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0;
    width: calc(27.8 * var(--mv_vw) * 8);
    flex: 0 0 auto;
    animation: slideInfinite 30s linear infinite;
    @media screen and (max-width: 767px) {
      width: calc(9.4 * var(--mv_vw) * 8);
      flex-direction: row-reverse;
      /* animation-direction: reverse; */
    }
    figure {
      display: flex;
      /* width: calc(31.6 * var(--mv_vw)); */
      width: calc(27.8 * var(--mv_vw));
      flex: 0 0 auto;
      @media screen and (max-width: 767px) {
        width: calc(9.4 * var(--mv_vw));
      }
      .on {
        display: none;
      }
      .off {
        display: block;
      }
      img {
        aspect-ratio: 316/373;
        width: 100%;
        object-fit: cover;
      }
    }
  }
  .mainVisual_v2025__slider {
    translate: calc(13.6 * var(--mv_vw) * -1) 0;
    display: flex;
    @media screen and (max-width: 767px) {
      translate: 0;
    }
    &.mainVisual_v2025__slider--on {
      @media screen and (min-width: 768px) {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 81%;
        overflow: hidden;
      }
      figure {
        .on {
          display: block;
        }
        .off {
          display: none;
        }
      }
    }
  }
  .mainVisual_v2025__grp {
    /* width: calc(55.4 * var(--mv_vw)); */
    width: calc(45.6 * var(--mv_vw));
    position: absolute;
    /* top: calc(36 * var(--mv_vw)); */
    top: calc(32 * var(--mv_vw));
    left: calc(19.4 * var(--mv_vw));
    z-index: 11;
    opacity: 0;
    translate: -10% 10%;
    @media screen and (max-width: 767px) {
      width: calc(31.3 * var(--mv_vw));
      top: calc(14.6 * var(--mv_vw));
      left: 0;
      right: 0;
      margin: 0 auto;
    }
  }
  .mainVisual_v2025__circle {
    width: 60%;
    position: absolute;
    z-index: -1;
    top: 13%;
    left: -6%;
  }
  .mainVisual_v2025__line {
    width: 44%;
    position: absolute;
    z-index: -1;
    top: 79%;
    left: 7%;
  }
  #mainVisual_v2025__circle {
    path {
      stroke-dasharray: 2000px;
      stroke-dashoffset: 2000px;
    }
  }
  #mainVisual_v2025__line {
    path {
      stroke-dasharray: 2000px;
      stroke-dashoffset: 2000px;
    }
  }
  .only-sp {
    @media screen and (max-width: 767px) {
      margin-top: calc(8 * var(--mv_vw));
      position: relative;
      z-index: 12;
    }
    > div {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  .top_main_btn{
    position: absolute;
    right:0;
    bottom:0px;
    width: 25%;
    @media screen and (min-width: 768px) {
      translate: 0 1rem;
      opacity: 0;
      pointer-events: none;
    }
  }
  .top_main_btn a{
    display: flex;
    align-items: center;
    position: relative;
    padding: 18px 0 18px 70px;
    z-index:1;
    background:#FFF;
    transition: .3s ease;
  }
  .top_main_btn a:hover{
    padding: 18px 0 18px 80px;
  }
  .top_main_btn a::after{
    content:"";
    background:#ED6C00;
    height:2px;
    width:30px;
    position: absolute;
    left:0;
    top:48%;
    transition: .3s ease;
  }
  .top_main_btn a:hover::after{
    width:40px;
    transition: .3s ease;
    background:#595656;
  }
  .top_main_btn a:hover{
    text-decoration:none;
  }
  .top_main_btn a .top_main_btn_text{
    width: 38%
  }
  .top_main_btn a .top_main_btn_img {
    width: 62%;
  }
  .top_main_btn a .top_main_btn_img img {
    width: 90%;
  }
  .top_main_btn a em{
    color:#ED6C00;
    font-weight:bold;
    display:block;
    font-size:24px;
    font-style:normal;
    line-height:24pt;
    transition: .3s ease;
  }
  .top_main_btn a:hover em{
    color:#595656;
  }
  .top_main_btn a span{
    font-weight:bold;
    display:block;
    color:#7F7F7F;
    font-size:16px;
    line-height:13pt;
    margin:5px 0 0 0;
  }
  .top_main_btn a::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: '';
    background: #ededed;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: transform .3s;
  }
  .top_main_btn a:hover::before {
    transform-origin: left top;
    transform: scale(1, 1);
  }
  @media screen and (max-width: 952px) {
    .top_main_btn {
      width: 35%;
    }
    .top_main_btn a {
      padding: 18px 0 18px 38px;
    }
    .top_main_btn a em {
      font-size: 20px;
    }
    .top_main_btn a span {
      font-size: 14px;
    }
  }

  
  .top_main_btn a {
    justify-content: space-between;
  }
  .top_main_btn {
    width: 40%;
    max-width:410px;
  }
  .top_main_btn a {
    padding: 30px 5px 30px 40px;
  }
  .top_main_btn a:hover{
    padding: 30px 0px 30px 60px;
  }
  .top_main_btn a .top_main_btn_text {
    width: 48%;
  }
  .top_main_btn a .top_main_btn_img {
    width: 42%;
  }
  .top_main_btn a em {
    font-size: 22px;
  }

  @media screen and (max-width: 952px){
  .top_main_btn a .top_main_btn_img {
    width:110px;
  }
  .top_main_btn a .top_main_btn_text {
    width: auto;
  }
  .top_main_btn a{
    padding: 30px 10px 30px 50px;
  }
  .top_main_btn a:hover{
    padding: 30px 0px 30px 60px;
  }
  .top_main_btn a .top_main_btn_img img {
    width: 100%;
  }
  .sp_btn {
        right: 133px;
        /* right: 75px; */
    }
    .top_main_btn a em {
      font-size: 17px;
    }
    .top_main_btn a span {
      font-size: 12px;
    }
  }
}

@media screen and (max-width: 767px) {
  .mainVisual_v2025.isAnimated .mainVisual_v2025__door::after {
    transition: clip-path 1.8s cubic-bezier(.68,.82,.91,1) .8s;
    clip-path: polygon(calc(100% - 9.2 * var(--mv_vw)) 0, 100% 0, 10% 100%, 0 40%);
  }
  .mainVisual_v2025 .mainVisual_v2025__door::after {
    left: calc(30 * var(--mv_vw) * -1);
    bottom: calc(16 * var(--mv_vw) * -1);
    clip-path: polygon(calc(100% - 9.2 * var(--mv_vw)) 0, 100% 0, 0 0, 0 0);
  }
  .mainVisual_v2025__slider:not(.mainVisual_v2025__slider--on) {
    .mainVisual_v2025__slider__set {
      @media screen and (max-width: 767px) {
        animation-direction: reverse;
        figure {
          &:nth-child(1) {
            order: 8;
          }
          &:nth-child(2) {
            order: 7;
          }
          &:nth-child(3) {
            order: 6;
          }
          &:nth-child(4) {
            order: 5;
          }
          &:nth-child(5) {
            order: 4;
          }
          &:nth-child(6) {
            order: 3;
          }
          &:nth-child(7) {
            order: 2;
          }
          &:nth-child(8) {
            order: 1;
          }
        }
      }
    }
  }
}