body{
  background-color: #411D72;
}

.foot-bac{
  background-color: #041941;
}

.head-logo{
  fill: #C4CDFF;
}

.pc-head-logo{
  fill: #C4CDFF;
}

.foot-logo{
  fill: #f7f8ff;
}

.navi-logo{
  fill: #f7f8ff;
}

.side-navi{
  stroke: #C4CDFF;
}

.top-tai{
  color: #C4CDFF;
}

.top-bun{
  color: #C4CDFF;
}

/*  */
/*  スマホ　*/
/*  */



@media screen and (max-width: 767px) {

.top-mot{
  top: 15vh;
  position: relative;
  width: 100vw;
  display: flex;
  justify-content: center;
}

  .top-ira01{
    width: 128.6vw;
    position: absolute;
    display: flex;
    justify-content: center;
    height: 50vh;
    animation: voice-top 15s -4s infinite linear;
    opacity: 0;
  }

  .top-ira02{
    width: 94.1vw;
    position: absolute;
    display: flex;
    justify-content: center;
    height: 50vh;
    animation: voice-top 15s 1s infinite linear;
    opacity: 0;
  }

  .top-ira03{
    width: 108vw;
    position: absolute;
    display: flex;
    justify-content: center;
    height: 50vh;
    animation: voice-top 15s 6s infinite linear;
    opacity: 0;
  }

  @keyframes voice-top {
    0%{
      opacity: 1;
      transform: translateX(150vw);
    }

    25%{
      opacity: 1;
      transform: translateX(50vw);
    }


    75%{
      transform: translateX(-150vw);
      opacity: 1;
    }

    75.1%{
      opacity: 0;
    }

    75.2%{
      transform: translateX(150vw);
      opacity: 0;
    }

    100%{
      transform: translateX(150vw);
      opacity: 1;
    }

  }

  .swiper{
    top: -100vh;
    width: 100%;
    height: 150vh;
    padding-top: 100vh;
    pointer-events: none;
    z-index: -999;
  }
  
  .swiper-wrapper {
    /* wrapperのサイズを調整 */
    width: 100%;
    height: 80vh;
  }
  
  .swiper-slide {
    /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
    color: #ffffff;
    width: 100%;
    height: 80vh;
    pointer-events: auto;
  }
  
  .slide-line{
    height: 7vh;
    width: 44vw;
    margin-top: -170vh;
  }
  
  .slide-linew{
    position: absolute;
    height: 7vh;
    border-bottom:solid 0.322vh #F7F8FF;
    width: 100%;
  }
  
  .slide-lineb{
    position: absolute;
    height: 7vh;
    border-bottom:solid 0.322vh #8497FC;
    width: 0%;
    animation: border_anim 3s ease-out infinite;
  }

  .voice-bac{
    background-color: #C4CDFF80;
    height: 79.96vh;
  }

  .voice-ira{
    width: 20.97vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }

  .voice-logo01 img{
    width: 25.87vw;
  }

  .voice-logo02 img{
    width: 11.8vw;
  }

  .voice-logo03 img{
    width: 31.8vw;
  }

  .voice-logo04 img{
    width: 21.6vw;
  }
  
  }
  
  @keyframes border_anim {
    0%{
      width: 0%;
    }
    80%,100%{
      width: 100%;
    }

}

/* パソコン用*/
@media screen and (min-width: 767px) {

.top-sum{
top: 70vh;
}

  .top-mot{
    position: relative;
    width: 100vw;
    display: flex;
    justify-content: flex-end;
    right: -10vw;
    align-items: flex-start;
  }
  
    .top-ira01{
      width: 65.8vw;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      height: 50vh;
      animation: voice-top 12s -3s infinite ease;
      opacity: 0;
    }
  
    .top-ira02{
      width: 40vw;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      height: 50vh;
      animation: voice-top 12s 1s infinite ease;
      opacity: 0;
      right: 5vw;
    }
  
    .top-ira03{
      width: 60vw;
      position: absolute;
      right: 5vw;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      height: 50vh;
      animation: voice-top 12s 5s infinite ease;
      opacity: 0;
    }
  
    @keyframes voice-top {
      0%{
        opacity: 0;
      }

      5%{
        opacity: 1;
      }

      30%{
        opacity: 1;
      }
  
  
      33%{
        opacity: 0;
      }


      100%{
        opacity: 0;
      }
  
    }
    html, body {
      overscroll-behavior-x: none; /* 横方向のスワイプで履歴を戻らない */
      overscroll-behavior-y: auto; /* 縦スクロールは通常通り */
    }
    
    .swiper{
      top: -70vh;
      width: 100%;
      height: 150vh;
      padding-top: 100vh;
      pointer-events: none;
      z-index: -999;
      overflow: visible;
    }
    
    .swiper-wrapper {
      /* wrapperのサイズを調整 */
      width: 100%;
      height: 80vh;
    }
    
    .swiper-slide {
      /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
      color: #ffffff;
      width: 100%;
      height: 80vh;
      pointer-events: auto;
    }
    
    .slide-line{
      height: 7vh;
      width: 37.3vw;
      margin-top: -140vh;
    }
    
    .slide-linew{
      position: absolute;
      height: 7vh;
      border-bottom:solid 0.322vh #F7F8FF;
      width: 100%;
    }
    
    .slide-lineb{
      position: absolute;
      height: 7vh;
      border-bottom:solid 0.322vh #8497FC;
      width: 0%;
      animation: border_anim 3s ease-out infinite;
    }
  
    .voice-bac{
      background-color: #C4CDFF80;
      width: 45vw;
      height: 80vh;
    }
  
    .voice-ira{
      width: 8.5vw;
      position: absolute;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

    .voice-sum{
      width: 29vw;
      margin-top: 18vh;
    }

    .voice-tai{
      margin-top: 0vh;
    }

    .voice-sub{
      margin-top: 1vh;
    }

    .voice-bun{
      margin-top: 2vh;
    }

    .voice-logo01{
      height: 5vh;
      position: absolute;
      transform: translateY(calc(-100% - 2vh));
    }

    .voice-logo02{
      height: 8vh;
      position: absolute;
      transform: translateY(calc(-100% - 2vh));
    }

    .voice-logo03{
      height: 2.58vh;
      position: absolute;
      transform: translateY(calc(-100% - 2vh));
    }

    .voice-logo04{
      height: 9.45vh;
      position: absolute;
      transform: translateY(calc(-100% - 0vh));
    }
  
    .voice-logo01 img{
      height: 5vh;
      object-fit: contain;
    }

    .voice-logo02 img{
      height: 8vh;
      object-fit: contain;
    }

    .voice-logo03 img{
      height: 2.58vh;
      object-fit: contain;
    }

    .voice-logo04 img{
      height: 9.45vh;
      object-fit: contain;
    }

    
    }
    
    @keyframes border_anim {
      0%{
        width: 0%;
      }
      80%,100%{
        width: 100%;
      }

}