/* CSS Document */
/* ************************/
/*	LINKへJUMP装飾用【<3本】
/* ************************/
:root {
	--trn3:  10px;
	--trn3_0: 1px;
	--trn3_1: calc(var(--trn3) + 1px);
	--trn3_2: calc(var(--trn3) * 2 + 1px);
	--trn3_3: calc(var(--trn3) * 3 + 1px);
	--dulation3: 3.0s;
	--sec3_2: calc(var(--dulation3) * 0.33);
	--sec3_3: calc(var(--dulation3) * 0.66);
	--bd-color3-blue: rgb(28, 69, 105);
	--bd-size3-blue: 7px;
}
/* container3_blue 独自設定 */
:root {
	--bd-color3-blue: rgb(28, 69, 105);
	--bd-size3-blue: 6px;
}
/* container3_blue 部品設定 */
.arrow_container3_blue {
	display: flex;
  align-items: center;
  margin: 20px;
  
  .arrow_all {
    position: relative;
    height: 20px;
    display: flex;
    margin: auto 5px;
    justify-content: center;
    align-items: center;
  }
  .slide_1, 
  .slide_2, 
  .slide_3 {
    position: absolute;
  }
  .slide_l {
    right: 0;
  }
  .slide_r {
    left: 0;
  }
  .slide_l.slide_1 {
    -webkit-animation: anim_trn3_l_1 var(--dulation3) linear infinite; 
    animation: anim_trn3_l_1 var(--dulation3) linear infinite;
  }
  .slide_l.slide_2 {
    -webkit-animation: anim_trn3_l_2 var(--dulation3) linear infinite; 
    animation: anim_trn3_l_2 var(--dulation3) linear infinite;
  }
  .slide_l.slide_3 {
    -webkit-animation: anim_trn3_l_3 var(--dulation3) linear infinite; 
    animation: anim_trn3_l_3 var(--dulation3) linear infinite;
  }
  .slide_l.slide_4 {
    -webkit-animation: anim_trn3_l_4 var(--dulation3) linear infinite; 
    animation: anim_trn3_l_4 var(--dulation3) linear infinite;
  }
  .slide_r.slide_1 {
    -webkit-animation: anim_trn3_r_1 var(--dulation3) linear infinite; 
    animation: anim_trn3_r_1 var(--dulation3) linear infinite;
  }
  .slide_r.slide_2 {
    -webkit-animation: anim_trn3_r_2 var(--dulation3) linear infinite; 
    animation: anim_trn3_r_2 var(--dulation3) linear infinite;
  }
  .slide_r.slide_3 {
    -webkit-animation: anim_trn3_r_3 var(--dulation3) linear infinite; 
    animation: anim_trn3_r_3 var(--dulation3) linear infinite;
  }

  .fade_1, 
  .fade_2, 
  .fade_3 {
    width: var(--bd-size3-blue);
    height: var(--bd-size3-blue);
    border: 2px solid;
    border-color: var(--bd-color3-blue) transparent transparent var(--bd-color3-blue);
    transform: rotate(-45deg);
  }
  .fade_l {
    transform: rotate(135deg);
  }
  .fade_r {
    transform: rotate(-45deg);
  }

  .fade_1, 
  .fade_2 {
    -webkit-animation: anim_fade3 var(--dulation3) linear infinite; 
    animation: anim_fade3 var(--dulation3) linear infinite;
  }
  .fade_2 {
    -webkit-animation-delay: var(--sec3_2); 
    animation-delay: var(--sec3_2);
  }
  .fade_3 {
    -webkit-animation: anim_fade3_last var(--dulation3) linear infinite; 
    animation: anim_fade3_last var(--dulation3) linear infinite;
  }
}
/* container3_orange 独自設定 */
:root {
	--bd-color3-orange: rgb(232, 139, 53);
	--bd-size3-orange: 8px;
}
/* container3_orange 部品設定 */
.arrow_container3_orange {
	display: flex;
  align-items: center;
  margin: 20px;
  
  .arrow_all {
    position: relative;
    height: 20px;
    display: flex;
    margin: auto 5px;
    justify-content: center;
    align-items: center;
  }
  .slide_1, 
  .slide_2, 
  .slide_3 {
    position: absolute;
  }
  .slide_l {
    right: 0;
  }
  .slide_r {
    left: 0;
  }
  .slide_l.slide_1 {
    -webkit-animation: anim_trn3_l_1 var(--dulation3) linear infinite; 
    animation: anim_trn3_l_1 var(--dulation3) linear infinite;
  }
  .slide_l.slide_2 {
    -webkit-animation: anim_trn3_l_2 var(--dulation3) linear infinite; 
    animation: anim_trn3_l_2 var(--dulation3) linear infinite;
  }
  .slide_l.slide_3 {
    -webkit-animation: anim_trn3_l_3 var(--dulation3) linear infinite; 
    animation: anim_trn3_l_3 var(--dulation3) linear infinite;
  }
  .slide_l.slide_4 {
    -webkit-animation: anim_trn3_l_4 var(--dulation3) linear infinite; 
    animation: anim_trn3_l_4 var(--dulation3) linear infinite;
  }
  .slide_r.slide_1 {
    -webkit-animation: anim_trn3_r_1 var(--dulation3) linear infinite; 
    animation: anim_trn3_r_1 var(--dulation3) linear infinite;
  }
  .slide_r.slide_2 {
    -webkit-animation: anim_trn3_r_2 var(--dulation3) linear infinite; 
    animation: anim_trn3_r_2 var(--dulation3) linear infinite;
  }
  .slide_r.slide_3 {
    -webkit-animation: anim_trn3_r_3 var(--dulation3) linear infinite; 
    animation: anim_trn3_r_3 var(--dulation3) linear infinite;
  }

  .fade_1, 
  .fade_2, 
  .fade_3 {
    width: var(--bd-size3-orange);
    height: var(--bd-size3-orange);
    border: 2px solid;
    border-color: var(--bd-color3-orange) transparent transparent var(--bd-color3-orange);
    transform: rotate(-45deg);
  }
  .fade_l {
    transform: rotate(135deg);
  }
  .fade_r {
    transform: rotate(-45deg);
  }

  .fade_1, 
  .fade_2 {
    -webkit-animation: anim_fade3 var(--dulation3) linear infinite; 
    animation: anim_fade3 var(--dulation3) linear infinite;
  }
  .fade_2 {
    -webkit-animation-delay: var(--sec3_2); 
    animation-delay: var(--sec3_2);
  }
  .fade_3 {
    -webkit-animation: anim_fade3_last var(--dulation3) linear infinite; 
    animation: anim_fade3_last var(--dulation3) linear infinite;
  }
}

@keyframes anim_trn3_l_1 {
    0% { transform: translateX(calc(var(--trn3_1) * -1)); }	
   33% { transform: translateX(calc(var(--trn3_0) * -1)); }	
   34% { transform: translateX(calc(var(--trn3_3) * -1)); }	
   66% { transform: translateX(calc(var(--trn3_2) * -1)); }	
  100% { transform: translateX(calc(var(--trn3_1) * -1)); }	
}
@keyframes anim_trn3_l_2 {
    0% { transform: translateX(calc(var(--trn3_2) * -1)); }	
   33% { transform: translateX(calc(var(--trn3_1) * -1)); }	
   66% { transform: translateX(calc(var(--trn3_0) * -1)); }	
   67% { transform: translateX(calc(var(--trn3_3) * -1)); }	
  100% { transform: translateX(calc(var(--trn3_2) * -1)); }	
}
@keyframes anim_trn3_l_3{
    0% { transform: translateX(calc(var(--trn3_3) * -1)); }	
   33% { transform: translateX(calc(var(--trn3_2) * -1)); }	
   66% { transform: translateX(calc(var(--trn3_1) * -1)); }	
   99% { transform: translateX(calc(var(--trn3_0) * -1)); }	
  100% { transform: translateX(calc(var(--trn3_3) * -1)); }	
}
@keyframes anim_trn3_r_1 {
    0% { transform: translateX(var(--trn3_1)); }	
   33% { transform: translateX(var(--trn3_0)); }	
   34% { transform: translateX(var(--trn3_3)); }	
   66% { transform: translateX(var(--trn3_2)); }	
  100% { transform: translateX(var(--trn3_1)); }	
}
@keyframes anim_trn3_r_2 {
    0% { transform: translateX(var(--trn3_2)); }	
   33% { transform: translateX(var(--trn3_1)); }	
   66% { transform: translateX(var(--trn3_0)); }	
   67% { transform: translateX(var(--trn3_3)); }	
  100% { transform: translateX(var(--trn3_2)); }	
}
@keyframes anim_trn3_r_3{
    0% { transform: translateX(var(--trn3_3)); }	
   33% { transform: translateX(var(--trn3_2)); }	
   66% { transform: translateX(var(--trn3_1)); }	
   99% { transform: translateX(var(--trn3_0)); }	
  100% { transform: translateX(var(--trn3_3)); }	
}
@keyframes anim_fade3 {
    0% { opacity: 1; }
   33% { opacity: 0; }
   36% { opacity: 0; }
   66% { opacity: 1; }
}
@keyframes anim_fade3_last {
    0% { opacity: 0; }
    3% { opacity: 0; }
   33% { opacity: 1; }
   66% { opacity: 1; }
  100% { opacity: 0; }
}