/* CSS Document */
/* ************************/
/*	LINKへJUMP装飾用【<4本】
/* ************************/
:root {
	--trn4:  10px;
	--trn4_0: 1px;
	--trn4_1: calc(var(--trn4) + 1px);
	--trn4_2: calc(var(--trn4) * 2 + 1px);
	--trn4_3: calc(var(--trn4) * 3 + 1px);
	--trn4_4: calc(var(--trn4) * 4 + 1px);
	--dulation4: 1.5s;
	--sec4_2: calc(var(--dulation4) * 0.25);
	--sec4_3: calc(var(--dulation4) * 0.5);
	--sec4_4: calc(var(--dulation4) * 0.75);
}
/* container4_blue 独自設定 */
:root {
	--bd-color4-blue: rgb(28, 69, 105);
	--bd-size4-blue: 4px;
}
/* container4_blue 部品設定 */
.arrow_container4_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, 
  .slide_4 {
    position: absolute;
  }
  .slide_l {
    right: 0;
  }
  .slide_r {
    left: 0;
  }
  .slide_l.slide_1 {
    -webkit-animation: anim_trn4_l_1 var(--dulation4) linear infinite; 
    animation: anim_trn4_l_1 var(--dulation4) linear infinite;
  }
  .slide_l.slide_2 {
    -webkit-animation: anim_trn4_l_2 var(--dulation4) linear infinite; 
    animation: anim_trn4_l_2 var(--dulation4) linear infinite;
  }
  .slide_l.slide_3 {
    -webkit-animation: anim_trn4_l_3 var(--dulation4) linear infinite; 
    animation: anim_trn4_l_3 var(--dulation4) linear infinite;
  }
  .slide_l.slide_4 {
    -webkit-animation: anim_trn4_l_4 var(--dulation4) linear infinite; 
    animation: anim_trn4_l_4 var(--dulation4) linear infinite;
  }
  .slide_r.slide_1 {
    -webkit-animation: anim_trn4_r_1 var(--dulation4) linear infinite; 
    animation: anim_trn4_r_1 var(--dulation4) linear infinite;
  }
  .slide_r.slide_2 {
    -webkit-animation: anim_trn4_r_2 var(--dulation4) linear infinite; 
    animation: anim_trn4_r_2 var(--dulation4) linear infinite;
  }
  .slide_r.slide_3 {
    -webkit-animation: anim_trn4_r_3 var(--dulation4) linear infinite; 
    animation: anim_trn4_r_3 var(--dulation4) linear infinite;
  }
  .slide_r.slide_4 {
    -webkit-animation: anim_trn4_r_4 var(--dulation4) linear infinite; 
    animation: anim_trn4_r_4 var(--dulation4) linear infinite;
  }

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

  .fade_1, 
  .fade_2, 
  .fade_3 {
    -webkit-animation: anim_fade4 var(--dulation4) linear infinite; 
    animation: anim_fade4 var(--dulation4) linear infinite;
  }
  .fade_2 {
    -webkit-animation-delay: var(--sec4_2); 
    animation-delay: var(--sec4_2);
  }
  .fade_3 {
    -webkit-animation-delay: var(--sec4_3); 
    animation-delay: var(--sec4_3);
  }
  .fade_4 {
    -webkit-animation: anim_fade4_last var(--dulation4) linear infinite; 
    animation: anim_fade4_last var(--dulation4) linear infinite;
  }
}
/* container4_orange 独自設定 */
:root {
	--bd-color4-orange: rgb(232, 139, 53);
	--bd-size4-orange: 8px;
}
/* container4_orange 部品設定 */
.arrow_container4_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, 
  .slide_4 {
    position: absolute;
  }
  .slide_l {
    right: 0;
  }
  .slide_r {
    left: 0;
  }
  .slide_l.slide_1 {
    -webkit-animation: anim_trn4_l_1 var(--dulation4) linear infinite; 
    animation: anim_trn4_l_1 var(--dulation4) linear infinite;
  }
  .slide_l.slide_2 {
    -webkit-animation: anim_trn4_l_2 var(--dulation4) linear infinite; 
    animation: anim_trn4_l_2 var(--dulation4) linear infinite;
  }
  .slide_l.slide_3 {
    -webkit-animation: anim_trn4_l_3 var(--dulation4) linear infinite; 
    animation: anim_trn4_l_3 var(--dulation4) linear infinite;
  }
  .slide_l.slide_4 {
    -webkit-animation: anim_trn4_l_4 var(--dulation4) linear infinite; 
    animation: anim_trn4_l_4 var(--dulation4) linear infinite;
  }
  .slide_r.slide_1 {
    -webkit-animation: anim_trn4_r_1 var(--dulation4) linear infinite; 
    animation: anim_trn4_r_1 var(--dulation4) linear infinite;
  }
  .slide_r.slide_2 {
    -webkit-animation: anim_trn4_r_2 var(--dulation4) linear infinite; 
    animation: anim_trn4_r_2 var(--dulation4) linear infinite;
  }
  .slide_r.slide_3 {
    -webkit-animation: anim_trn4_r_3 var(--dulation4) linear infinite; 
    animation: anim_trn4_r_3 var(--dulation4) linear infinite;
  }
  .slide_r.slide_4 {
    -webkit-animation: anim_trn4_r_4 var(--dulation4) linear infinite; 
    animation: anim_trn4_r_4 var(--dulation4) linear infinite;
  }

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

  .fade_1, 
  .fade_2, 
  .fade_3 {
    -webkit-animation: anim_fade4 var(--dulation4) linear infinite; 
    animation: anim_fade4 var(--dulation4) linear infinite;
  }
  .fade_2 {
    -webkit-animation-delay: var(--sec4_2); 
    animation-delay: var(--sec4_2);
  }
  .fade_3 {
    -webkit-animation-delay: var(--sec4_3); 
    animation-delay: var(--sec4_3);
  }
  .fade_4 {
    -webkit-animation: anim_fade4_last var(--dulation4) linear infinite; 
    animation: anim_fade4_last var(--dulation4) linear infinite;
  }
}

@keyframes anim_trn4_l_1 {
    0% { transform: translateX(calc(var(--trn4_1) * -1)); }	
   25% { transform: translateX(calc(var(--trn4_0) * -1)); }	
   26% { transform: translateX(calc(var(--trn4_4) * -1)); }	
   50% { transform: translateX(calc(var(--trn4_3) * -1)); }	
   75% { transform: translateX(calc(var(--trn4_2) * -1)); }	
  100% { transform: translateX(calc(var(--trn4_1) * -1)); }	
}
@keyframes anim_trn4_l_2 {
    0% { transform: translateX(calc(var(--trn4_2) * -1)); }	
   25% { transform: translateX(calc(var(--trn4_1) * -1)); }	
   50% { transform: translateX(calc(var(--trn4_0) * -1)); }	
   51% { transform: translateX(calc(var(--trn4_4) * -1)); }	
   75% { transform: translateX(calc(var(--trn4_3) * -1)); }	
  100% { transform: translateX(calc(var(--trn4_2) * -1)); }	
}
@keyframes anim_trn4_l_3{
    0% { transform: translateX(calc(var(--trn4_3) * -1)); }	
   25% { transform: translateX(calc(var(--trn4_2) * -1)); }	
   50% { transform: translateX(calc(var(--trn4_1) * -1)); }	
   75% { transform: translateX(calc(var(--trn4_0) * -1)); }	
   76% { transform: translateX(calc(var(--trn4_4) * -1)); }	
  100% { transform: translateX(calc(var(--trn4_3) * -1)); }	
}
@keyframes anim_trn4_l_4{
    0% { transform: translateX(calc(var(--trn4_4) * -1)); }	
   25% { transform: translateX(calc(var(--trn4_3) * -1)); }	
   50% { transform: translateX(calc(var(--trn4_2) * -1)); }	
   75% { transform: translateX(calc(var(--trn4_1) * -1)); }	
   99% { transform: translateX(calc(var(--trn4_0) * -1)); }	
  100% { transform: translateX(calc(var(--trn4_4) * -1)); }	
}
@keyframes anim_trn4_r_1 {
    0% { transform: translateX(var(--trn4_1)); }	
   25% { transform: translateX(var(--trn4_0)); }	
   26% { transform: translateX(var(--trn4_4)); }	
   50% { transform: translateX(var(--trn4_3)); }	
   75% { transform: translateX(var(--trn4_2)); }	
  100% { transform: translateX(var(--trn4_1)); }	
}
@keyframes anim_trn4_r_2 {
    0% { transform: translateX(var(--trn4_2)); }	
   25% { transform: translateX(var(--trn4_1)); }	
   50% { transform: translateX(var(--trn4_0)); }	
   51% { transform: translateX(var(--trn4_4)); }	
   75% { transform: translateX(var(--trn4_3)); }	
  100% { transform: translateX(var(--trn4_2)); }	
}
@keyframes anim_trn4_r_3{
    0% { transform: translateX(var(--trn4_3)); }	
   25% { transform: translateX(var(--trn4_2)); }	
   50% { transform: translateX(var(--trn4_1)); }	
   75% { transform: translateX(var(--trn4_0)); }	
   76% { transform: translateX(var(--trn4_4)); }	
  100% { transform: translateX(var(--trn4_3)); }	
}
@keyframes anim_trn4_r_4{
    0% { transform: translateX(var(--trn4_4)); }	
   25% { transform: translateX(var(--trn4_3)); }	
   50% { transform: translateX(var(--trn4_2)); }	
   75% { transform: translateX(var(--trn4_1)); }	
   99% { transform: translateX(var(--trn4_0)); }	
  100% { transform: translateX(var(--trn4_4)); }	
}
@keyframes anim_fade4 {
    0% { opacity: 1; }
   25% { opacity: 0; }
   28% { opacity: 0; }
   75% { opacity: 1; }
}
@keyframes anim_fade4_last {
    0% { opacity: 0; }
    3% { opacity: 0; }
   25% { opacity: 1; }
   75% { opacity: 1; }
  100% { opacity: 0; }
}