/* ボディー条件 */
body {
  background-color: #041941;
}

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




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

@media screen and (max-width: 767px) {
  .loader {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 1s ease, visibility 1s ease;
  }
  .loader.loaded {
    opacity: 0;
    visibility: hidden;
  }
  .vertical-typing {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 3vh;
    line-height: 0.9;
    white-space: pre-wrap;
    font-family: "Noto Sans JP", serif;
    font-weight: 850;
    opacity: 1;
    color: #041941;
  }
  
  .char {
    opacity: 0;
    transform: translateY(100%);
    display: inline-block;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  
  
  

.top{
  height: 100vh;
}

  .head-logo{
    display:none;
  }

  .pc-head-logo{
    display:none;
  }

  .top-pic img{
    height: auto;
  }

.top-logo{
  top:5vh;
  width: 58.9vw;
}


.top-bun01{
  display: none;
  position: absolute;
  writing-mode: vertical-rl;
  right: 15vw;
  top: 55vh;
  font-weight: 750;
  font-size: 1.6vh;
}

.service-box{
  background: linear-gradient(to bottom, #1B1F2700, #65668DFF);
  width: 83.9%;
  height: 90vh;
}

.service-mot{
  height: 40vh;
}

.pc-service-num{
  display: none;
}

.service-ani01{
position: absolute;
width: 100%;
animation: service02 12s infinite;
opacity: 0;
}

.service-ani02{
position: absolute;
width: 100%;
animation: service02 12s infinite;
animation-delay: 4s;
opacity: 0;
}
.service-ani03{
position: absolute;
width: 100%;
animation: service02 12s infinite;
animation-delay: 8s;
opacity: 0;
}

.service-ani01-ira{
  width: 100%;
  height: 30vh;
  display: flex;
  }

.service-ani02-ira{
  width: 100%;
  height: 30vh;
  display: flex;
  }

.service-ani03-ira{
  width: 100%;
  height: 30vh;
  display: flex;
  }

@keyframes service01 {
  0%{
    opacity: 1;
    transform: translateX(200%);
  }
  15%,30%{
    transform: translateX(0%);
  }
  50%,100%{
    transform: translateX(-200%);
    opacity: 1;
  }
}

.service-ani01-sum{

}

.service-ani02-sum{

}

.service-ani03-sum{

}

@keyframes service02 {
  0%{
    opacity: 0;
  }
  10%,30%{
    opacity: 1;
  }
  40%,100%{
    opacity: 0;
  }
}


.shitakami{
  animation: img-wrap1 12s ease;
  animation-iteration-count:infinite;
  transform: translateY(-100%);
  animation-delay: 0;
  }
  
  .mannakakami{
  animation: img-wrap2 12s ease;
  animation-iteration-count:infinite;
  transform: translateY(-100%);
  animation-delay: 0s;
  }
  
  .uekami{
  animation: img-wrap3 12s ease;
  animation-iteration-count:infinite;
  transform: translateY(-100%);
  animation-delay: 0s;
  }


@keyframes img-wrap1 {

  0% {
  transform: translateY(-100%);
  }
  
  33%,100% {
  transform: translateY(0);
  }
  }
  
  @keyframes img-wrap2 {
  
  0% {
  transform: translateY(-100%);
  }
  
  11% {
  transform: translateY(-100%);
  }
  
  33%,100% {
  transform: translateY(0);
  }
  }
  
  @keyframes img-wrap3 {
  
  0% {
  transform: translateY(-100%);
  }
  
  16.5% {
  transform: translateY(-100%);
  }
  
  33%,100% {
  transform: translateY(0);
  }
  }



.hidaribun{
  animation: img-wrap 2s ease;
  animation-iteration-count:infinite;
  }
  
  @keyframes img-wrap {
  
  0% {
  transform: scaleX(0%);
  }
  
  100% {
  transform: scaleX(100%);
  }
  }
  
  .uebun{
  animation: img-wrap 2s ease;
  animation-iteration-count:infinite;
  }
  
  .ipanime{
  animation: img-wrap 2s ease;
  animation-iteration-count:infinite;
  }
  
  .glafmigi{
  animation: img-wra 2s ease;
  animation-iteration-count:infinite;
  }
  
  @keyframes img-wra {
  
  0% {
  transform: translateY(-100%);
  }
  
  100% {
  transform: translateY(0%);
  }
  }
  
  .glafhidari{
  animation: img-wr 2s ease;
  animation-iteration-count:infinite;
  }
  
  @keyframes img-wr {
  
  0% {
  transform: translateY(100%);
  }
  
  100% {
  transform: translateY(0%);
  }
  }


  .marutenmetu{
    -webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 2s ease-in-out infinite alternate;
    }
    
    @-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
    }
    @-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
    }
    @keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
    }

.service-line{
  width: 51.7vw;
  border-bottom: solid 0.161vh;
  border-color: #F7F8FF;
  margin-left: 0;
}

.news-bun{
  width: 56.99vw;
  margin-left: 0;
  margin-top: 1vh;
}

.news-ira{
  width: 69.9vw;
}

.pc-news-ira{
  display: none;
}

.vision{
  height: 68vh;
}

.pc-vision-pic{
  display: none;
}

.vision-pic{
  width: 100vw;
  position: absolute;
}
.vision-pic img{
  width: 100vw;
}

.vision-sum{
  top: 10vh;
}


  
  }



/* パソコン用*/
@media screen and (min-width: 767px) {
  .loader {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 1s ease, visibility 1s ease;
  }
  
  .loader.loaded {
    opacity: 0;
    visibility: hidden;
  }
  .vertical-typing {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 3vh;
    line-height: 0.9;
    white-space: pre-wrap;
    font-family: "Noto Sans JP", serif;
    font-weight: 850;
    opacity: 1;
    color: #041941;
  }
  
  .char {
    opacity: 0;
    transform: translateY(100%);
    display: inline-block;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  

  .top{
    height: 100vh;
  }
  
    .head-logo{
      display:none;
    }
  
  .top-logo{
    display: none;
  }
  
  .pc-top-bun01{
    display: none;
  }

  .pc-top-pic{
    height: auto;
  }

  .top-bun01{
    position: absolute;
    writing-mode: vertical-rl;
    margin-left: 50%;
    transform: translateX(-50%);
    top: 35vh;
    font-size: 3.0vh;
    height: 44.2vh;
  }

  .mission{
    margin-top: 35vh;
  }

  .mission-bun{
    width: 43.6vw;
    margin-left: 0;
    margin-right: 0;
  }

  .service{
    margin-top: 35vh;
  }

  .service-bun{
    width: 36.5vw;
    margin-left: 0;
    margin-right: 0;
  }
  
  .service-box{
    background: none;
  }
  
  .service-mot{
    height: 62.7vh;
    width: 36.5vw;
    margin-right: 0vw;
    background: linear-gradient(to bottom, #1B1F2700, #65668DFF);
    margin-top: 0;
    display: flex;
    align-items: center;
    border-bottom-left-radius: 2.8vw;
    border-bottom-right-radius: 2.8vw;
  }

  .pc-service-sum{
    position: absolute;
  }

  .pc-service-num{
    position: absolute;
    left: 50%;
    transform: translate(-50%,-100%);
    top: -2vh;
    font-size: 5vh;
  }
  .pc-service-ani-sum{
    height: 0;
    position: absolute;
    top: 3vh;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .service-ani01{
  position: absolute;
  width: 100%;
  animation: service02 12s infinite;
  opacity: 0;
  }
  
  .service-ani02{
  position: absolute;
  width: 100%;
  animation: service02 12s infinite;
  animation-delay: 4s;
  opacity: 0;
  }
  .service-ani03{
  position: absolute;
  width: 100%;
  animation: service02 12s infinite;
  animation-delay: 8s;
  opacity: 0;
  }
  
  .service-ani01-ira{
    width: 100%;
    height: 30vh;
    display: flex;
    justify-content: center;
    }
  
  .service-ani02-ira{
    width: 100%;
    height: 30vh;
    display: flex;
    justify-content: center;
    }
  
  .service-ani03-ira{
    width: 100%;
    height: 29.5vh;
    display: flex;
    justify-content: center;
    }
  
  @keyframes service01 {
    0%{
      opacity: 1;
      transform: translateX(200%);
    }
    15%,30%{
      transform: translateX(0%);
    }
    50%,100%{
      transform: translateX(-200%);
      opacity: 1;
    }
  }
  
  .service-ani01-sum{
  
  }
  
  .service-ani02-sum{
  
  }
  
  .service-ani03-sum{
  
  }
  
  @keyframes service02 {
    0%{
      opacity: 0;
    }
    10%,30%{
      opacity: 1;
    }
    40%,100%{
      opacity: 0;
    }
  }
  
  
  .shitakami{
    animation: img-wrap1 12s ease;
    animation-iteration-count:infinite;
    transform: translateY(-100%);
    animation-delay: 0;
    }
    
    .mannakakami{
    animation: img-wrap2 12s ease;
    animation-iteration-count:infinite;
    transform: translateY(-100%);
    animation-delay: 0s;
    }
    
    .uekami{
    animation: img-wrap3 12s ease;
    animation-iteration-count:infinite;
    transform: translateY(-100%);
    animation-delay: 0s;
    }
  
  
  @keyframes img-wrap1 {
  
    0% {
    transform: translateY(-100%);
    }
    
    33%,100% {
    transform: translateY(0);
    }
    }
    
    @keyframes img-wrap2 {
    
    0% {
    transform: translateY(-100%);
    }
    
    11% {
    transform: translateY(-100%);
    }
    
    33%,100% {
    transform: translateY(0);
    }
    }
    
    @keyframes img-wrap3 {
    
    0% {
    transform: translateY(-100%);
    }
    
    16.5% {
    transform: translateY(-100%);
    }
    
    33%,100% {
    transform: translateY(0);
    }
    }
  
  
  
  .hidaribun{
    animation: img-wrap 2s ease;
    animation-iteration-count:infinite;
    }
    
    @keyframes img-wrap {
    
    0% {
    transform: scaleX(0%);
    }
    
    100% {
    transform: scaleX(100%);
    }
    }
    
    .uebun{
    animation: img-wrap 2s ease;
    animation-iteration-count:infinite;
    }
    
    .ipanime{
    animation: img-wrap 2s ease;
    animation-iteration-count:infinite;
    }
    
    .glafmigi{
    animation: img-wra 2s ease;
    animation-iteration-count:infinite;
    }
    
    @keyframes img-wra {
    
    0% {
    transform: translateY(-100%);
    }
    
    100% {
    transform: translateY(0%);
    }
    }
    
    .glafhidari{
    animation: img-wr 2s ease;
    animation-iteration-count:infinite;
    }
    
    @keyframes img-wr {
    
    0% {
    transform: translateY(100%);
    }
    
    100% {
    transform: translateY(0%);
    }
    }
  
  
    .marutenmetu{
      -webkit-animation:blink 1s ease-in-out infinite alternate;
      -moz-animation:blink 1s ease-in-out infinite alternate;
      animation:blink 2s ease-in-out infinite alternate;
      }
      
      @-webkit-keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
      }
      @-moz-keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
      }
      @keyframes blink{
      0% {opacity:0;}
      100% {opacity:1;}
      }

  .service-ani01-num{
    display: none;
  }

  .service-ani02-num{
    display: none;
  }

  .service-ani03-num{
    display: none;
  }
  
  .service-ani01-bun{
    text-align: center;
    margin-top: 1.5vh;
  }

  .service-ani02-bun{
    text-align: center;
    margin-top: 1.5vh;
  }

  .service-ani03-bun{
    text-align: center;
    margin-top: 1.5vh;
  }
  
  .service-line{
    width: 2.12vw;
    border-bottom: solid 0.63vh;
    border-color: #F7F8FF;
  }

  .pc-service-bot{
    position: absolute;
    bottom: 8vh;
  }

  .news{
    margin-top: 35vh;
  }
  
  .news-bun{
    width: 56.99vw;
    margin-left: 0;
  }
  
  .news-ira{
    display: none;
  }

  .pc-news-ira{
    width: 80vw;
  }

  .pc-news-bot{
    margin-top: 10vh;
  }
  
  .vision{
    height: 90vh;
  }

  .vision-pic{
    display: none;
  }

  .pc-vision-pic{
    width: 100vw;
    position: absolute;
  }
  .pc-vision-pic img{
    width: 100vw;
  }
  
  .vision-sum{
    top: 10vh;
  }

  .vision-bun{
    width: 36.5vw;
    margin-left: 0;
  }
  
  


}