/* ============================================================ en.Clover 共通コンポーネント — トップに戻るボタン /assets/css/back-to-top.css 使い方： 1. で back-to-top.css と back-to-top.js を読み込む 2. の直前に下記を配置し、LPのパレットに合う修飾クラスを付ける 3. 新しいパレットのLPを作るときは修飾クラスを1つ追加するだけ ============================================================ */ .back-to-top { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-radius: 50%; background: var(--btt-bg, #333333); color: #FFFFFF; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); -webkit-tap-highlight-color: transparent; /* 非表示時はフォーカス対象から外すため visibility も切り替える */ opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background 0.2s ease; } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; } .back-to-top:hover { background: var(--btt-bg-hover, #000000); } .back-to-top:focus-visible { outline: 2px solid var(--btt-bg, #333333); outline-offset: 3px; } .back-to-top svg { width: 20px; height: 20px; display: block; } /* ---------- LPごとのカラー ---------- */ .back-to-top--green { --btt-bg: #2F5D4F; --btt-bg-hover: #244A3E; } /* LP① */ .back-to-top--navy { --btt-bg: #17323C; --btt-bg-hover: #0F2530; } /* LP② */ /* ---------- タブレット以上 ---------- */ @media (min-width: 768px) { .back-to-top { right: 28px; bottom: 28px; width: 52px; height: 52px; } .back-to-top svg { width: 22px; height: 22px; } } @media (prefers-reduced-motion: reduce) { .back-to-top { transform: none; transition: opacity 0.01s linear, visibility 0.01s linear; } }