.top-container{
   overflow: hidden;
   position: relative;
}

.mainVisual{
   width: 100%;
   height:100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 50px;
}

img.logo-top{
   max-width: 200px;
   padding-left: 15px;
}

.top-menu-container{
   position: relative;
   z-index:2;
   max-width:860px;
   padding: 0 50px;
   margin: 0 auto;
   gap: 30px;
   display: flex;
   justify-content: center;
   flex-direction: column;
   backdrop-filter: blur(7px);
}

.top-menu-inner{
   margin: 0 auto;
   display: flex;
   padding-bottom: 20px;
   gap: 60px;
}

.top-txt{
   text-align: center;
   font-size: 16px;
   color: #d7faff;
   line-height: 35px;
}

.link-container{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;
   padding-right: 30px;
}
.to-douga, .to-web-design{
   width: 100%;
   position: relative;
   padding-right: 40px;
}

.to-douga a, .to-web-design a{
   display:block;
   border-bottom: 1px dashed #fff;
   height: 90px;
   line-height: 90px;
   text-align: left;
   padding: 0 30px;
   width: 100%;
   font-size: 30px;
   text-decoration: none;
   color: #fff;
   font-weight: bold;
   position: relative;
}
.to-douga a{
   border-top: 1px dashed #fff;
}

.to-douga a:hover::before, .to-web-design a:hover::before{
   content: "";
   position:absolute;
   width: 0;
   top: -2px;
   left: 0;
   height: 2px;
   background-color: #fff;
   animation: line 1s forwards;
}

.to-douga a:hover::after, .to-web-design a:hover::after{
   content: "";
   position:absolute;
   width: 0;
   bottom: -1px;
   left: 0;
   height: 2px;
   background-color: #fff;
   animation: line 1s forwards;
}

@keyframes line {
   0%{width: 0;}
  100%{width: 100%;}
}

.to-douga::before, .to-web-design::before{
   content:"";
   position:absolute;
   right: 7px;
   top:50%;
   transform: translateY(-50%);
   width: 35px;
   height: 3px;
   background: #fff;
}
.to-douga::after, .to-web-design::after{
   content:"";
   position: absolute;
   top: calc(50% - 2px);
   right: 13px;
   width: 15px;
   height: 15px;
   border-top: 3px solid #fff;
   border-right: 3px solid #fff;
   -webkit-transform: rotate(45deg) translateY(-50%);
   transform: rotate(45deg) translateY(-50%);
}


.mainVisual::after{
   content: "";
   position: absolute;
   top:0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0.9;
   background: linear-gradient(to right, #0d99e5 0%,#24a9d1 50%,#28b9c3 100%);
}


/*---------------------------------------------------------
bubble
-----------------------------------------------------------*/
 .bubble {
   position:relative;
   display: block;
   width: 70px;
   height: 70px;
   background-color:rgba(41, 230, 255, 0.2);
   border-radius: 50%;
   box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.6) inset;
   -webkit-box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.6) inset;
 
 }
 .bubble:after {
   content: "";
   display: block;
   width: 20%;
   height: 20%;
   border-radius: 50%;
   background: rgba(245, 252, 253, 0.5);
   position: absolute;
   right: 15%;
   top: 15%;
   filter: blur(2px);
   -webkit-filter: blur(2px);
   transform: rotateZ(45deg) scaleY(0.8);
   -webkit-transform: rotateZ(45deg) scaleY(0.8);
 }
 
 .bubble-outer {
   z-index:1;
   position: absolute;
 }
 
 .pos1{ top:10%; left:2%;}
 .pos2{ top:10%; right:2%;}
 .pos3{ top:20%; left:32%;}
 .pos4{ top:20%; right:32%;}
 .pos5{ top:30%; left:26%;}
 .pos6{ top:30%; right:26%;}
 .pos7{ top:40%; left:41%;}
 .pos8{ top:40%; right:41%;}
 .pos9{ top:50%; left:20%;}
 .pos10{ top:50%; right:22%;}
 .pos11{ top:60%; left:5%;}
 .pos12{ top:60%; right:7%;}
 .pos13{ top:70%; left:50%;}
 .pos14{ top:70%; right:47%;}
 .pos15{ top:80%; left:46%;}
 .pos16{ top:80%; right:43%;}
 .pos17{ top:90%; left:15%;}
 .pos18{ top:90%; right:13%;}
 .pos19{ top:100%; left:29%;}
 .pos20{ top:100%; right:23%;}
 .pos21{ top:110%; left:35%;}
 .pos22{ top:110%; right:36%;}
 .pos23{ top:120%; left:40%;}
 .pos24{ top:120%; right:39%;}
 .pos25{ top:130%; left:7%;}
 .pos26{ top:130%; right:8%;}
 .pos27{ top:140%; left:11%;}
 .pos28{ top:140%; right:15%;}
 .pos29{ top:150%; left:14%;}
 .pos30{ top:150%; right:24%;}
 .pos31{ top:160%; left:47%;}
 .pos32{ top:160%; right:47%;}
 .pos33{ top:170%; left:15%;}
 .pos34{ top:170%; right:12%;}


 .shake1 { animation: shake 2.0s ease 0s infinite normal;}
 .shake2 { animation: shake 2.5s ease 0s infinite normal;}
 .shake3 { animation: shake 3.0s ease 0s infinite normal;}
 .shake4 { animation: shake 3.5s ease 0s infinite normal;}
 .shake5 { animation: shake 4.0s ease 0s infinite normal;}
 .shake6 { animation: shake 4.5s ease 0s infinite normal;}
 .shake7 { animation: shake 5.0s ease 0s infinite normal;}
 .shake8 { animation: shake 5.5s ease 0s infinite normal;}
 .shake9 { animation: shake 6.0s ease 0s infinite normal;}
 .shake10 { animation: shake 6.5s ease 0s infinite normal;}
 
 .scale1 { animation: scale-up1 10s ease forwards;}
 .scale2 { animation: scale-up2 10s ease forwards;}
 .scale3 { animation: scale-up3 10s ease forwards;}
 .scale4 { animation: scale-up4 10s ease forwards;}
 .scale5 { animation: scale-up5 10s ease forwards;}
 .scale6 { animation: scale-up6 10s ease forwards;}
 .scale7 { animation: scale-up7 10s ease forwards;}
 .scale8 { animation: scale-up8 10s ease forwards;}
 .scale9 { animation: scale-up9 10s ease forwards;}
 .scale10 { animation: scale-up10 10s ease forwards;}
 
 .float1 { animation: float 21s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal; }
 .float2 { animation: float 22s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal; }
 .float3 { animation: float 23s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal; }
 .float4 { animation: float 24s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal; }
 .float5 { animation: float 25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal; }
 .float6 { animation: float 26s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal; }
 .float7 { animation: float 27s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal; }
 .float8 { animation: float 28s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal; }
 .float9 { animation: float 29s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal; }
 .float10 { animation: float 30s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal; }
 
 @keyframes shake {
   0% { transform: translateX(10px); }
   50% { transform: translateX(-10px); }
   100% { transform: translateX(10px); }
 }
 @keyframes float {
   0% { transform: translateY(0px);}
   100% { top:-100px;}
 }
 
 @keyframes scale-up1 {
   0% { transform: scale(0);}
  30% { transform: scale(0.1);}
  100% { transform: scale(0.1); }
 }
 @keyframes scale-up2 {
   0% { transform: scale(0);}
  30% { transform: scale(0.2);}
  100% { transform: scale(0.2); }
 }
 @keyframes scale-up3 {
   0% { transform: scale(0);}
  30% { transform: scale(0.3);}
  100% { transform: scale(0.3); }
 }
 @keyframes scale-up4 {
   0% { transform: scale(0);}
  30% { transform: scale(0.4);}
  100% { transform: scale(0.4); }
 }
 @keyframes scale-up5 {
   0% { transform: scale(0);}
  30% { transform: scale(0.5);}
  100% { transform: scale(0.5); }
 }
 @keyframes scale-up6 {
   0% { transform: scale(0);}
  30% { transform: scale(0.6);}
  100% { transform: scale(0.6); }
 }
 @keyframes scale-up7 {
   0% { transform: scale(0);}
  30% { transform: scale(0.7);}
  100% { transform: scale(0.7); }
 }
 @keyframes scale-up8 {
   0% { transform: scale(0);}
  30% { transform: scale(0.8);}
  100% { transform: scale(0.8); }
 }
 @keyframes scale-up9 {
   0% { transform: scale(0);}
  30% { transform: scale(0.9);}
  100% { transform: scale(0.9); }
 }
 @keyframes scale-up10 {
   0% { transform: scale(0);}
  30% { transform: scale(1.0);}
  100% { transform: scale(1.0); }
 }

@media (max-width: 840px){
 img.logo-top {
   max-width: 190px;
}
.to-douga a, .to-web-design a {
   height: 90px;
   font-size: 20px;
   line-height: 90px;
}
.to-douga::after, .to-web-design::after {
   top: calc(50% - 2px);
   right: 13px;
   width: 9px;
   height: 9px;
}
.to-douga::before, .to-web-design::before {
   right: 9px;
   width: 29px;
   height: 3px;
}
}

@media (max-width: 660px){

.mainVisual{
   margin-top: 30px;
}

   img.logo-top {
      max-width: 110px;
}
  .top-menu-container {
   padding: 0 15px;
  }
  .to-douga::after, .to-web-design::after {
   border-top: 2px solid #fff;
   border-right: 2px solid #fff;
  }
  .to-douga a, .to-web-design a {
     height: 50px;
     font-size: 16px;
     line-height:50px;
     padding-left: 10px;
     padding-right: 35px;
   }
   .top-menu-inner {
      gap: 40px;
  }
  .to-douga::after, .to-web-design::after {
  
     right: 13px;
     width: 9px;
     height: 9px;
     top: calc(48% - -1px);
  }
  .to-douga::before, .to-web-design::before {
     right: 9px;
     width: 20px;
     height: 2px;
  }
  .to-douga::before{
     top: calc(50% + 1px);
}
  .to-web-design::before{
     top: calc(50% + 1px);
  }

  .top-txt {
   font-size: 13px;
   line-height: 30px;
}
.top-menu-container {
   gap: 15px;
}
  }