@charset "UTF-8";
/*== 矢印の線がループして伸縮 */

.btnlinestretches5{
    /*線の基点とするためrelativeを指定*/
	position:relative;
    /*リンクの形状*/ 
	color:#ffffff;
    padding: 10px 0;
	display:inline-block;
    text-decoration: none;
    outline: none;
    font-size: 1rem;;
    
}

/*線の設定*/
.btnlinestretches5::before {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    /*線の形状*/
    width: 100%;
    height: 1px;
    background: #ffffff;
}

/*矢印の設定*/
.btnlinestretches5::after {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom:-4px;
    /*矢印の形状*/
    width: 8px;
    height: 8px;
    border-top: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    transform: rotate(45deg);
}

/*線と矢印を繰り返しアニメーション*/
.btnlinestretches5::before {
    animation: arrowlong01 2s ease infinite;
}
.btnlinestretches5::after {
    animation: arrowlong02 2s ease infinite;
}

@keyframes arrowlong01{
    0%{width:0;opacity:0}
    20%{width:0;opacity:1}
    80%{width:105%;opacity:1}
    100%{width:105%;opacity:0}
}

@keyframes arrowlong02{
    0%{left:0;opacity:0}
    20%{left:0;opacity:1}
    80%{left:103%;opacity:1}
    100%{left:103%;opacity:0}
}

.btnlinestretches5::after {
    content: "";
    position: absolute;
    bottom: -5px;
    width: 12px;
    height: 12px;
    margin-left: -12px; /* 矢印幅の半分くらい */
    border-top: 1px solid #ffffff;
    border-right: 0px solid #ffffff;
    transform: rotate(45deg);
    /* ここで影をつける */
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.6));
}






/*== 矢印の線がループして伸縮（黒バージョン）==*/

.btnlinestretches52 {
    position: relative;
    color: #000000; /* 文字色を黒に */
    padding: 10px 0;
    display: inline-block;
    text-decoration: none;
    outline: none;
    font-size: 1rem;
}

/* 線（黒） */
.btnlinestretches52::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #000000; /* 線を黒に */
    animation: arrowlong01 2s ease infinite;
}

/* 矢印（黒） */
.btnlinestretches52::after {
    content: "";
    position: absolute;
    bottom: -5px;
    width: 12px;
    height: 12px;
    margin-left: -12px;
    border-top: 1px solid #000000; /* 上線を黒に */
    border-right: 0px solid #000000; /* 必要なら右線も1pxにしてOK */
    transform: rotate(45deg);
    animation: arrowlong02 2s ease infinite;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2)); /* 少し軽めの影 */
}

.btnlinestretches52::before,
.btnlinestretches52::after {
    pointer-events: none;
}

.btnlinestretches5:hover,
.btnlinestretches52:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}