<a href="https://www.hinakonakata.com/about" target="_top" class="wave-link"> ABOUT <svg viewBox="0 0 200 10" preserveAspectRatio="none"> <path d="M0 5 Q10 1.5 20 5 T40 5 T60 5 T80 5 T100 5 T120 5 T140 5 T160 5 T180 5 T200 5" /> </svg> </a> <style> .wave-link { position: relative; display: inline-block; text-decoration: none; color: #000; font-size: 14px; cursor: pointer; } .wave-link svg { position: absolute; left: 0; bottom: -6px; width: 100%; height: 10px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; /* ここでSVGがクリックを邪魔しないようにする */ } .wave-link:hover svg { opacity: 1; } .wave-link path { fill: none; stroke: #000; stroke-width: 1; } </style>