.btn{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
width:320px;
height:52px;
background:#005bac;
color:#fff;
font-size:18px;
font-weight:500;
letter-spacing:.15em;
line-height:1;
margin-top:35px;
transition:.3s ease;
overflow:hidden;
}


.arrow{
position:relative;
display:inline-block;
width:55px;
height:1.5px;
background:#fff;
transition:transform .4s ease;
flex-shrink:0;
}


.arrow::before{
content:"";
position:absolute;
right:-3px;
top:50%;
width:8px;
height:8px;
background:#fff;
clip-path:polygon(0 0,100% 100%,0 100%);
transform:translateY(-89%);
}



/* =========================
   PC Hover Only
========================= */

@media (hover:hover) and (pointer:fine){

.btn:hover .arrow{
transform:translateX(8px);
}

}



/* =========================
   Tablet
========================= */

@media screen and (max-width:1024px){

.btn{
width:180px;
height:45px;
font-size:12px;
gap:16px;
margin-top:30px;
}


.arrow{
width:42px;
}

.arrow::before{
width:7px;
height:7px;
}

}



/* =========================
   Smartphone
========================= */

@media screen and (max-width:768px){

.btn{
width:100%;
height:42px;
font-size:11px;
gap:14px;
margin-top:25px;
}


.arrow{
width:32px;
}

.arrow::before{
width:9px;
height:9px;
}


/* hover完全無効 */

.btn:hover .arrow{
transform:none;
}

}



/* =========================
   Small Smartphone
========================= */

@media screen and (max-width:480px){

.btn{
height:40px;
font-size:11px;
gap:12px;
margin-top:20px;
}


.arrow{
width:28px;
}

.arrow::before{
width:8px;
height:8px;
}

}